Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Home

erwin edited this page · 6 revisions

Welcome to the ckeditor wiki!

Working example with Carrierwave and rails 3.1.rc6: https://github.com/fxposter/rails_3_1_with_ckeditor_and_carrierwave

FAQ

How do I configure CKEditor?

To configure CKEditor, create a file in your own application in this path: app/assets/javascripts/ckeditor/config.js and then you can follow the standard documentation about configuration: http://docs.ckeditor.com/#!/guide/dev_configuration

How do I localize CKEditor templates?

1/ localize CKEditor. Add the current_locale in your application layout

 javascript_tag "window.locale = #{I18n.locale.to_s.inspect};"

then modify your app/assets/javascripts/ckeditor/config.js

 CKEDITOR.editorConfig = function( config ) {
     config.language = window.locale;
     ...
     config.templates_files = [ '/templates/' + config.language + '/mytemplates.js' ];

2/ localize the 'defaults( templates :

  • create a folder structure in your public folder

     public
        templates
            en
            fr
            images
    
  • create your own default templates (or duplicate the standard ones ) into en/mytemplates.js

             CKEDITOR.addTemplates("default",{
      imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+"templates/images/"),
      templates:
      [
      {
        title: "Image and Title",
        image:"template1.gif",
        description:"One main image with a title and text that surround the image.",
        html:'<h3><img src=" " alt="" style="margin-right: 10px" height="100" width="100" align="left" />Type the title here</h3><p>Type the text here</p>'
      },
      {
        title:"Strange Template",
        image:"template2.gif",
        description:"A template that defines two colums, each one with a title, and some text.",
        html:'<table cellspacing="0" cellpadding="0" style="width:100%" border="0"><tr><td style="width:50%"><h3>Title 1</h3></td><td></td><td style="width:50%"><h3>Title 2</h3></td></tr><tr><td>Text 1</td><td></td><td>Text 2</td></tr></table><p>More text goes here.</p>'
      },
      {
        title:"Text and Table",
        image:"template3.gif",
        description:"A title with some text and a table.",
        html:'<div style="width: 80%"><h3>Title goes here</h3><table style="width:150px;float: right" cellspacing="0" cellpadding="0" border="1"><caption style="border:solid 1px black"><strong>Table title</strong></caption><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table><p>Type the text here</p></div>'
      }
      ]
    });
    
  • create your localized templates into the corresponding files i.e. : fr/mytemplates.js

             /*
     Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
     For licensing, see LICENSE.md or http://ckeditor.com/license
    */
    
    CKEDITOR.addTemplates("default",{
      imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+"templates/images/"),
      templates:
      [
      {
        title: "Titre et Image",
        image:"template1.gif",
        description:"Une image principale avec un titre et du texte entourant l'image.",
        html:'<h3><img src=" " alt="" style="margin-right: 10px" height="100" width="100" align="left" />Entrez le titre ici</h3><p>Entrez le texte ici</p>'
      },
      {
        title:"Modèle spécial",
        image:"template2.gif",
        description:"Un modèle qui définit 2 colonnes, chaque colonne avec un titre, et du texte.",
        html:'<table cellspacing="0" cellpadding="0" style="width:100%" border="0"><tr><td style="width:50%"><h3>Titre 1</h3></td><td></td><td style="width:50%"><h3>Titre 2</h3></td></tr><tr><td>Texte 1</td><td></td><td>Texte 2</td></tr></table><p>Ajoutez du texte ici.</p>'
      },
      {
        title:"Texte et Table",
        image:"template3.gif",
        description:"Un titre avec du texte et une table.",
        html:'<div style="width: 80%"><h3>Entrez le titre</h3><table style="width:150px;float: right" cellspacing="0" cellpadding="0" border="1"><caption style="border:solid 1px black"><strong>Intitulé de la table</strong></caption><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table><p>Entrez le texte ici</p></div>'
      }
      ]
    });
    
  • create your template images ( or copy the 'standard' ones ) into public/templates/images

      public
          templates
              images
                 template1.gif
                 template2.gif
                 template3.gif
    
Something went wrong with that request. Please try again.