2009/12/09

Plugin localization in CKEditor (vs FCKeditor)

If you work in the web you should have already realized that there are tons of people from every where and that not all of them speak English, and even if they are able to understand it they might to work with their native tonge, so providing the ability to translate your plugins it's important if you want them to be used anywhere.

Adding the plugin

In FCKeditor the registration call of the plugin did specify the available languages:

FCKConfig.Plugins.Add( 'easyupload', 'de,en') ;

In CKEditor there's no call to add a plugin, just a list of plugins and two other lists to add extra plugins or remove existing ones (each list is just a comma separated string with the names of the plugins). So that call would be something along the lines:

config.extraPlugins = 'easyupload';

But that doesn't specify the languages available for the plugin, now instead is the plugin itself the one that specifies what are its available languages:

CKEDITOR.plugins.add( 'easyupload',
{
    // translations
    lang : ['en'],
...

The translation file

The available translations must be placed as previously under the pluginfolder/lang/languagecode.js being pluginfolder the name of your plugin and languagecode the code of the language ('en' in the above case), so we would end with a file under plugins/easyupload/lang/en.js for example.

The structure of this file is quite different from the previous one. In FCKeditor the file was a simple list of properties added to the FCKLang object:

FCKLang['EuImgDialogTitle']  = 'Insert / Edit Image' ;

Now the file is made of one (or several depending on how you have defined your data) call to the CKEDITOR.plugins.setLang method that gets as parameters the name of the plugin, the language code and an object that contains the definitions of the strings:

CKEDITOR.plugins.setLang( 'easyupload', 'en',
    {
        easyimage :
        {
            toolbar: 'Insert/Edit an image',
...
        }
    }
)

Usage

And so the way to use it now is also slightly different, the "lang" object of the current editor instance has been augmented with your definitions:

        editor.ui.addButton( 'EasyImage',
            {
                label : editor.lang.easyimage.toolbar,
                command : 'easyimage',
                icon : this.path + 'images/image.gif'
            } );

Dialogs

Now all the dialogs are created from javascript objects, there are no html parts to load so there is no need for the "fcklang" attribute and the call to FCKLanguageManager.TranslatePage(document)

6 comments:

Grzegorz said...

Could I add a custom plugins to Write Area?

Alfonso said...

You will have to alter the extension and recompile it, there's no support for external plugins.

If you can suggest an interesting plugin then I can include it in the default installation.

DWW said...

I'mm a bit new to ckeditor.
I am intersted in knowing how I can create loclization for ckeditor.

Would appreciate your assistance. Thank you
Yubi

Alfonso said...

Can you explain what do you want?
This post already explains how to add a new translation to a CKEditor plugin.
If you want to add a whole new translation for ckeditor then you should start with the files available under the lang folder of ckeditor, but I don't remember right now all the details about that.

Nursultan said...

Hello, I am trying to add a Russian translation to the MediaEmbed plugin (http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor).
I added the line
" lang: ['ru'],"
to the function "CKEDITOR.plugins.add"
and changed
the editor.ui.addButton function in line with your example. I also created the ru.js file in the lang subfolder. However, I still don't see the translation.

Alfonso said...

@Nursultan:

That plugin doesn't include any code to take care of additional translations, so the first step is to correct the plugin so all the strings are moved to an en.js file and then you'll be able to add your ru.js file.