Custom Dropdown in CKEditor 4

Need a custom dropdown in CKEditor 4? I’ve created this plugin, you can download strInsert from the CKEditor plugins repository or from gitHub.

If you are not familiar with how to add plugins to ckeditor4, this should help, if its not clear, leave a comment and i’ll do my best to help.

How to use it

A few things need doing, we need to before we can build our custom dropdown in ckeditor 4:

1. create a directory in the ckeditor/plugins directory.
2. add our plugin to the ckeditor toolbar config
3. add the plugin to ckeditor using config.extraPlugins

The Plugin Code

[code]
/**
* @license Copyright © 2013 Stuart Sillitoe <stuart@vericode.co.uk>
* strInsert – A Custom Dropdown in CKEditor 4
* This is open source, can modify it as you wish.
*
* strInsert by Stuart Sillitoe
* stuartsillitoe.co.uk
*
*/
CKEDITOR.plugins.add(‘strinsert’,
{
requires : [‘richcombo’],
init : function( editor )
{
// array of strings to choose from that’ll be inserted into the editor
var strings = [];
strings.push([‘@@FAQ::displayList()@@’, ‘FAQs’, ‘FAQs’]);
strings.push([‘@@Glossary::displayList()@@’, ‘Glossary’, ‘Glossary’]);
strings.push([‘@@CareerCourse::displayList()@@’, ‘Career Courses’, ‘Career Courses’]);
strings.push([‘@@CareerProfile::displayList()@@’, ‘Career Profiles’, ‘Career Profiles’]);

// add the menu to the editor
editor.ui.addRichCombo(‘strinsert’,
{
label: ‘Insert Content’,
title: ‘Insert Content’,
voiceLabel: ‘Insert Content’,
className: ‘cke_format’,
multiSelect:false,
panel:
{
css: [ editor.config.contentsCss, CKEDITOR.skin.getPath(‘editor’) ],
voiceLabel: editor.lang.panelVoiceLabel
},

init: function()
{
this.startGroup( "Insert Content" );
for (var i in strings)
{
this.add(strings[i][0], strings[i][1], strings[i][2]);
}
},

onClick: function( value )
{
editor.focus();
editor.fire( ‘saveSnapshot’ );
editor.insertHtml(value);
editor.fire( ‘saveSnapshot’ );
}
});
}
});
[/code]

Add the Plugin in Ckeditor 4 Config

Here’s a snippet of my config.js, i have shortened it for brevity:

[code]
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: ‘editing’, groups: [ ‘find’, ‘selection’, ‘spellchecker’ ] },
{ name: ‘links’ },
‘/’,
{ name: ‘paragraph’, groups: [ ‘list’, ‘indent’, ‘blocks’, ‘align’ ] },
{ name: ‘strinsert’ }
];

config.extraPlugins = ‘strinsert’;
};
[/code]

So in the above code, we have added the “strinsert” plugin to the toolbarGroups, and also used config.extraPlugins to register the plugin with ckeditor4.

Using It for your custom dropdown in ckeditor 4

My dropdown at the moment simply outputs strings to the editor, which are in turn parsed and replaced with the actual content etc. I’ll be working on making this transparent with editable regions soon, but need to find the time!




21 Comments

Hi Stuart, thanks for the plugin, for some reason the menu item is not showing in the toolbar.
I have followed the instructions, created dir in plugins dir called strinsert droped the plugin.js in there and then added the toolbar config:
config.toolbarGroups = [

{ name: ‘editing’, groups: [ ‘find’, ‘selection’, ‘spellchecker’ ] },
{ name: ‘links’ },
‘/’,
{ name: ‘paragraph’, groups: [ ‘list’, ‘indent’, ‘blocks’, ‘align’ ] },
{ name: ‘strinsert’ }
];

and also registerd plugin using:
config.extraPlugins = ‘strinsert’;

any clues?

Hi Stuart, I am trying to insert some custom text that has background styling so the user can identify:
strings1.push([‘FreeText:Not less than $20 million:20:1’, ‘Free Text 2’, ‘Not less than $20 million’]);

The plugin doesn’t seem to handle this, I have checked the arrays and they are populated correctly, I have alos added to my config:
config.allowedContent = true;

no luck.

Hi Stuart, further investigations have found that I can add the span with no style, it seems that if I ad style or a class the editor does not like it.
I have solved this problem by using your plugin to insert the span and then editing the contents.css file to style the span.

Cheers

Hi Larry, That’s interesting, I will do a few tests myself. This is a fairly basic plug when it comes down to it, and i need to build it up further when i get time. Seems you are using it in a similar way to the existing styles plugin?

Hi Stuart,

Got it working as explained by using the config.extraPlugins = ‘strinsert’; method. Found a simple way to return dynamic content for the drop down. (with Apache)

Drop an .htaccess file into the plugins directory with this content…

RewriteEngine On
Redirect /[location from public_html]/plugins/strinsert/plugin.js /[location from public_html]/plugins/strinsert/plugin.php

From there its a matter of using headers on the PHP file to output as a JS file but as it’s PHP I have access to query my DB, create multiple groups (headers in the drop down) and place dynamic output into it.

Whilst this is an easy work around for Apache setups, do you have a better method to populate the Drop Down from a DB or other external source ?

Or is there a better way with CK Editor to tell it what file to use when adding the plugin ? (so I could just reference my own file in the first place)

Clearly I am new at looking at this editor.

Cheers
Stephen

I am trying to add menu from ckeditor. and to do that I have followed the following steps.
a) download menu plugin
b) paste it in the directory ckeditor/plugin/menu
c) written the code “config.extraPlugins = ‘menu’;” in ckeditor/config.js but still menu is not coming. Please help.

You can delete this….I kept passing it ” ” which it was rejecting. Just had to pass the image properly….

strings.push([”, ‘How do I Use This?’, ‘A Quick Look’]);

HI, love this plugin. Thanks. But I need some help. I am using the ckeditor as inline editor. Rather than having a placeholder text inserted, I would like to have it inserted in html so that I can place elements rather than text.
Is this possible? How can I achieve this, please?
Thanks

Hi,

I’m using this plugin in conjunction with the rails gem that implements ckeditor for the rails asset pipeline located here: https://github.com/galetahub/ckeditor. The editor works fine but I can’t get the drop down to display. Here’s where I’m placing your plugin:

app\assets\javascripts\ckeditor\plugins\strinsert\plugin.js

and my config.js:

CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: ‘document’, groups: [ ‘mode’, ‘document’ ] },
{ name: ‘basicstyles’, groups: [ ‘basicstyles’, ‘cleanup’ ] },
{ name: ‘insert’ },
{ name: ‘clipboard’, groups: [ ‘clipboard’, ‘undo’ ] },
‘/’,
{ name: ‘strinsert’ }
]

config.extraPlugins = ‘strinsert’;
config.removeButtons = ‘Anchor,Strike,Subscript,Superscript’;
config.removePlugins = ‘flash,iframe,smiley’;
config.removeDialogTabs = ‘link:advanced’;
config.resize_enabled = false;
config.width = ‘216mm’;
config.format_tags = ‘p;h1;h2;h3;pre’;
config.removeDialogTabs = ‘image:advanced;link:advanced’;
};

Any advice/suggestions appreciated,
Joe

I had to do two things to get my setup to work just in case anyone else comes across this issue:

I used the ckeditor builder (with selected plugins) to generate files that I placed in my assets directory. I tried adding the Strinsert plugin into this bundle, but it would never take.

Then I manually downloaded Strinsert to the plugins directory. I noticed that the downloaded bundle was referring to a plugin called ‘others’ in config.js. Using ‘others’ and not ‘strinsert’ is what worked.

Is there a way to control (within plugin.js) how to refer to a particular plugin in config.js?

Joe

Hi Stuart,

Thanks for the plugin but I can’t integrate the plugin with the CKEditor.
Can you please check my total process.
1. I have created a dir named “strinsert”under the MyProj/ckeditor/plugins/.
2. Copy the plugin.js which I got from CKEditor plugins repository.
3. changes my config.js file as below..
CKEDITOR.editorConfig = function (config) {
// // Define changes to default configuration here. For example:
// // config.language = ‘fr’;
// // config.uiColor = ‘#AADC6E’;
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: ‘clipboard’, groups: [‘clipboard’, ‘undo’] },
{ name: ‘editing’, groups: [‘find’, ‘selection’, ‘spellchecker’] },
{ name: ‘links’ },
‘/’,
{ name: ‘basicstyles’, groups: [‘basicstyles’, ‘cleanup’] },
{ name: ‘paragraph’, groups: [‘list’, ‘indent’, ‘blocks’, ‘align’] },
{ name: ‘styles’ },
// Add strinsert plugin
{ name: ‘strinsert’ }
];
// Register the strinsert plugin
config.extraPlugins = ‘strinsert’;
};

can you please check it?

Hi Stuart – this looks like exactly what I need to put mail merge fields in my text. Do you still have plans to allow it to read the options from a db? If so when will that be available?

Thanks!

I’ve been at this for two days. Nothing I do can make the drop down display. I’ve stripped out most of the code to its simplest form. Used hardcoded strings for the data, hardcoded the css url. The button renders on the toolbar, but when you click on it, nothing happens.

I’ve used Javascript alerts, before and after the addvalue calls, so I know they are firing.

What am I missing?

plugin.js

CKEDITOR.plugins.add(‘insertMailField’,
{
requires: [‘richcombo’], //, ‘styles’ ],
init: function (editor) {
var config = editor.config;

editor.ui.addRichCombo(‘insertMailField’,
{
toolbar: ‘NAFFull’,
label: “Insert tokens”,
title: “Insert tokens”,
voiceLabel: “Insert tokens”,
className: ‘cke_format’,
multiSelect: false,
panel:
{
css: [config.contentsCss, CKEDITOR.getUrl(‘skins/moono/editor.css’)],
voiceLabel: ‘Insert tokens’
},
init: function () {
this.startGroup(‘Tokens’);
this.add(‘value’, ‘drop_text’, ‘drop_label’);
},
onClick: function (value)
{
editor.focus();
editor.fire(‘saveSnapshot’);
editor.insertHtml(value);
editor.fire(‘saveSnapshot’);
}
}); //end add rich combo
} //init editor function
});//end add

config.js

config.toolbar_NAFFull =
[
[‘Source’, ‘DocProps’, ‘-‘, ‘NewPage’, ‘Preview’, ‘-‘, ‘Templates’],
[‘Cut’, ‘Copy’, ‘Paste’, ‘PasteText’, ‘PasteWord’, ‘-‘, ‘Print’, ‘SpellCheck’],
[‘Undo’, ‘Redo’, ‘-‘, ‘SelectAll’, ‘RemoveFormat’],
[‘insertMailField’],
‘/’,
[‘Bold’, ‘Italic’, ‘Underline’, ‘StrikeThrough’],
[‘OrderedList’, ‘UnorderedList’, ‘-‘, ‘Outdent’, ‘Indent’, ‘Blockquote’],
[‘JustifyLeft’, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyFull’],
[‘Link’, ‘Unlink’],
[‘Image’, ‘Table’, ‘Rule’, ‘SpecialChar’, ‘PageBreak’],
‘/’,
[‘Style’, ‘FontFormat’, ‘FontName’, ‘FontSize’],
[‘TextColor’, ‘BGColor’],
[‘FitWindow’, ‘ShowBlocks’, ‘-‘, ‘About’] // No comma for the last row.
];

config.extraPlugins = ‘insertMailField’;

This plugin is working perfectly fine for me, but my requirement is to add item of this dropdown dynamically and I am unable to do so. Can you please help me out on this?

Leave a Reply

Your email address will not be published. Required fields are marked *