I recently implemented a plugin that provides me with the code needed to create a dropdown menu on my CKeditor toolbar. This dropdown menu contains various styles that can be applied by clicking on them. Here is the code snippet:
CKEDITOR.plugins.add( 'tokens',
{
requires : ['richcombo'],
init : function( editor )
{
var config = editor.config,
lang = editor.lang.format;
// List of tags for the dropdown.
var tags = [];
tags[0]=["[contact_name]", "Name", "Name"];
tags[1]=["[contact_email]", "email", "email"];
tags[2]=["[contact_user_name]", "User name", "User name"];
// Function to create style objects for all defined styles.
editor.ui.addRichCombo( 'tokens',
{
label : "Insert tokens",
title :"Insert tokens",
voiceLabel : "Insert tokens",
className : 'cke_format',
multiSelect : false,
panel :
{
css : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],
voiceLabel : lang.panelVoiceLabel
},
init : function()
{
this.startGroup( "Tokens" );
for (var this_tag in tags){
this.add(tags[this_tag][0], tags[this_tag][1], tags[this_tag][2]);
}
},
onClick : function( value )
{
editor.focus();
editor.fire( 'saveSnapshot' );
editor.insertHtml(value);
editor.fire( 'saveSnapshot' );
}
});
}
});
The purpose of this code is to insert the corresponding tag when a style is selected from the dropdown menu. I am interested in customizing each tag to perform specific functions, such as adding CSS styles to the selected text in the editor. For example, having a function named 'Red Font' that changes the font color of any existing <p> element to red.