Home

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