Hi
In this post I am adding custom drop down in ckeditor also I downloaded ckeditor in my local and using locally not from cdn link.
path of my ckeditor folder which I downloaded from net
/webapp/jscr/ckeditor
ckeditor is my directory.
inside ckeditor have created one folder namely tokens.
inside tokens folder we created a file plugin.js
so the path of my plugin.js is
/webapp/jscr/ckeditor/plugins/tokens/plugin.js
content of plugin.js
CKEDITOR.plugins.add( 'tokens',
{
requires : ['richcombo'], //, 'styles' ],
init : function( editor )
{
var config = editor.config,
lang = editor.lang.format;
// Gets the list of tags from the settings.
var tags = []; //new Array();
//this.add('value', 'drop_text', 'drop_label');
tags[0]=["[contact_name]", "Name", "Name"];
tags[1]=["[contact_email]", "email", "email"];
tags[2]=["[contact_user_name]", "User name", "User name"];
// Create style objects for all defined styles.
editor.ui.addRichCombo( 'tokens',
{
label : "Custom DD",
title :"Custom DD",
voiceLabel : "Custom DD",
className : 'cke_format',
multiSelect : false,
panel :
{
css : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],
voiceLabel : lang.panelVoiceLabel
},
init : function()
{
this.startGroup( "Tokens" );
//this.add('value', 'drop_text', 'drop_label');
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' );
}
});
}
});
I have lots of fields inside my html and we are using thymeleaf, so I am not pasting all code here
only text area where we have to bind our ckeditor.
now content of my html file is
<textarea name="editorArea" id="editorArea">
In this post I am adding custom drop down in ckeditor also I downloaded ckeditor in my local and using locally not from cdn link.
path of my ckeditor folder which I downloaded from net
/webapp/jscr/ckeditor
ckeditor is my directory.
inside ckeditor have created one folder namely tokens.
inside tokens folder we created a file plugin.js
so the path of my plugin.js is
/webapp/jscr/ckeditor/plugins/tokens/plugin.js
content of plugin.js
CKEDITOR.plugins.add( 'tokens',
{
requires : ['richcombo'], //, 'styles' ],
init : function( editor )
{
var config = editor.config,
lang = editor.lang.format;
// Gets the list of tags from the settings.
var tags = []; //new Array();
//this.add('value', 'drop_text', 'drop_label');
tags[0]=["[contact_name]", "Name", "Name"];
tags[1]=["[contact_email]", "email", "email"];
tags[2]=["[contact_user_name]", "User name", "User name"];
// Create style objects for all defined styles.
editor.ui.addRichCombo( 'tokens',
{
label : "Custom DD",
title :"Custom DD",
voiceLabel : "Custom DD",
className : 'cke_format',
multiSelect : false,
panel :
{
css : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],
voiceLabel : lang.panelVoiceLabel
},
init : function()
{
this.startGroup( "Tokens" );
//this.add('value', 'drop_text', 'drop_label');
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' );
}
});
}
});
I have lots of fields inside my html and we are using thymeleaf, so I am not pasting all code here
only text area where we have to bind our ckeditor.
now content of my html file is
<textarea name="editorArea" id="editorArea">
<script type="text/javascript" src="jscr/plugins/ckeditor/ckeditor.js"></script>
<script>
window.onload = function() {
CKEDITOR.replace( 'editorArea',{
toolbar :
[
['SpecialChar'],
['Format'],
['Styles'],
['Undo', 'Redo'],
['Bold', 'Italic', 'Strike'],
['NumberedList', 'BulletedList'],
['Cut', 'Copy', 'Paste'],
['Blockquote'],
['Source'],
['tokens']
],
extraPlugins: 'tokens'
});
}
</script>
here I am facing issue of thymeleaf custom
attribute thats y we use
window.onload else in simple html no need.
Hope this would work as it is working for me.
Thanks