CODEWITHSUNDEEP
javascriptpluginsckeditor
Thibaud Mahin
Thibaud Mahin

Reputation: 3

CKeditor : error camelcase addExternal Plugin

I think we have a problem with CKeditor and this function plugin.addExternalPlugin

== Steps to reproduce ==

  1. You need to have CKEditor 4.5.4
  2. A folder where you have installed your ckeditor
  ckeditor/
     adapters/
     lang/
     plugins/ (Default plugins)
     skins/
     ...
  1. A folder where you will add a new plugin
ftp/
   ckeditor/
      plugins/
          yourPlugin/
               plugin.js

So, when you have this configuration, you can add a plugin like "youtube" in your folder "FTP/ckeditor/plugins/youtube". you can find this one here : http://ckeditor.com/addon/youtube.

In your config.js, you add your plugin "youtube" :

CKEDITOR.editorConfig = function( config ){
config.toolbar_barre_par_defaut=[['Source'],['Bold','Italic','Underline'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],['OrderedList','UnorderedList'],['youtube']];
}

In your JS file, you add extra plugin like this:

config.toolbar = 'barre_par_defaut';
config.extraPlugins = 'youtube';
config.allowedContent = true;

And, before change your textarea in CKeditor, you add this line :

CKEDITOR.plugins.addExternal('youtube', '/ftp/ckeditor/plugins/youtube/');

When you do that, you replace textarea by CKEditor :

CKEDITOR.replace(....);

== Expected result ==

When CKEditor is loaded, you have a new button in your toolbar, and his name is Youtube.

== Actual result ==

Actually, you don't have a button because there is problem of camelcase on your code.

Why ? because when i change line 17 on youtube's plugin :

editor.ui.addButton( 'Youtube',

to

editor.ui.addButton( 'youtube',

My code and your code works.

== Other details (browser, OS, CKEditor version, installed plugins) ==

Browser : Chrome Version : 4.5.4 Installed plugins : default + youtube for this example. But, you can reproduct with all plugin who follow your documentation or, when a plugin name is spelled differently in functions

When you read this doc :http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1

You create a new plugin, you add this plugin in another folder that ckeditor/plugins, and that you added this plugin to your toolbar and extraplugin. It will not work.

Because you have change plgun's name in :

"Creating the Toolbar Button

The plugin dialog window is to be opened by using a toolbar button. To this end, we need to define a button that will be associated with the dialog window.

editor.ui.addButton( 'Abbr', {
    label: 'Insert Abbreviation',
    command: 'abbr',
    toolbar: 'insert'
});
"

Upvotes: 0

Views: 261

Answers (2)

Anna Tomanek
Anna Tomanek

Reputation: 2239

In CKEditor toolbar buttons always start with uppercase and all pieces of documentation as well as examples (like the tutorial you quoted above or even the instructions for the third-party YouTube plugin) adhere to this convention.

Plugin and command names always start with lowercase.

You do not need to edit any source code of any of the plugins, just stick to the conventions and everything will work without issues.

Upvotes: 0

AlfonsoML
AlfonsoML

Reputation: 12690

The install instructions for that plugin state that you must use the "Youtube" name for the button. config.toolbar = [{ name: 'insert', items: ['Image', 'Youtube']}];

If you try to use it in lowercase then it's logical that it won't work unless you change the plugin to fit your taste.

Upvotes: 1

Related Questions