Home

erwin edited this page Sep 29, 2014 · 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:'

    Entrez le titre ici

    Entrez le texte ici

    ' }, { 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:'

    Titre 1

    Titre 2

    Texte 1 Texte 2

    Ajoutez du texte ici.

    ' }, { title:"Texte et Table", image:"template3.gif", description:"Un titre avec du texte et une table.", html:'

    Entrez le titre

    Intitulé de la table
         
         
         

    Entrez le texte ici

    ' } ] });
  • create your template images ( or copy the 'standard' ones ) into public/templates/images

     public
         templates
             images
                template1.gif
                template2.gif
                template3.gif