CKEditor custom drop-down
HTML
<script src="http://cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<textarea id="editor">Hello!</textarea>
JavaScript
CKEDITOR.replace( 'editor', {
toolbarGroups: [
{ name: 'mode' },
{ name: 'basicstyles' },
{ name: 'styles' }
],
on: {
pluginsLoaded: function() {
var editor = this,
config = editor.config,
mySelection,
myitems = [ 'red', 'orange', 'blue', 'green' ];
function colorfulSpan( color ) {
return '<span style="color:' + color + '">' + color + '</span>';
}
editor.ui.addRichCombo( 'myCombo', {
label: 'My combo\'s label',
title: 'My combo',
toolbar: 'styles',
allowedContent: 'span{color}',
panel: {
css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
multiSelect: false
},
init: function() {
this.startGroup( 'My custom panel group' );
var items = myitems;
for ( var i = 0; i < items.length; i++ ) {
var item = items[ i ];
this.add( item, colorfulSpan( item ), item );
}
},
onOpen : function(){
mySelection = editor.getSelection();
},
onRender: function() {
editor.on( 'selectionChange', function( ev ) {
var currentValue = this.getValue(),
elementPath = ev.data.path,
elements = elementPath.elements;
for ( var i = 0, count = elements.length, element; i < count; i++ ) {
element = elements[ i ];
if( element && element.getName() == 'span' ) {
...