CKEditor create plugin jquery
- Create a folder named 'test_plugin'.
- Create a file name 'plugin.js' under 'test_plugin' folder using following contents with level 'Content'.
- Create a file file named 'icon.gif' under 'test_plugin' folder to show in CKEditor menu.
- Add the following line or update if already exists:
- config.extraPlugins = "extra_plugin".
- Create a CKEditor instance like following content with level "Create Instance".
LEVEL: "Content"
(function(){
//Section 1 : Code to execute when the toolbar button is pressed
var editorCustom;
var a = {
exec:function(editor){
editorCustom = editor;
var theSelectedText = "";
var mySelection = editor.getSelection();
if (CKEDITOR.env.ie) {
mySelection.unlock(true);
theSelectedText = mySelection.getNative().createRange().text;
} else {
theSelectedText = mySelection.getNative();
}
var my_html = "Insert when custom button clicked.";
try {
editorCustom.insertHtml(my_html);
} catch (ex) {
console.log(ex);
var content = editorCustom.getData() + "<p>" + my_html + "</p>";
editorCustom.setData(content);
}
}
},
//Section 2 : Create the button and add the functionality to it
b='test_plugin';
CKEDITOR.plugins.add(b,{
init:function(editor){
editor.addCommand(b,a);
editor.ui.addButton('test_plugin',{
label:'Test Plugin',
icon: this.path + 'icon.gif',
command:b
});
}
});
})();
LEVEL: "Create Instance"
<script type="text/javascript">
for (var i in CKEDITOR.instances) {
if(CKEDITOR.instances[i]) {
CKEDITOR.remove(CKEDITOR.instances[i]); /* REMOVE ALL CKEDITOR INSTANCE IF NEED */
}
}
CKEDITOR.replace( 'text_area_id',
{
pasteFromWordRemoveFontStyles : false,
fullPage : false,
removePlugins : 'elementspath',
height : 300,
toolbar :
[
{
name: 'styles',
items : [ 'Format','Font','FontSize' ]
},
{
name: 'basicstyles',
items : [ 'Bold','Italic','Underline','Strike', 'RemoveFormat']
},
{
name: 'paragraph',
items : [ 'NumberedList','BulletedList','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ]
},
{
name: 'clipboard',
items : [ 'Undo','Redo' ]
},
{
name: 'tableoperations',
items : [ '-', 'Table', 'TableInsertRowBefore', 'TableInsertRowAfter', 'TableRowDelete', '-',
'TableInsertColumnBefore', 'TableInsertColumnAfter', 'TableColumnDelete', '-', 'TableCellMerge',
'TableCellSplitVertical', 'TableCellSplitHorizontal', 'TableDeleteTable' ]
} ,
{
name: "test_plugin",
items: ["-", "test_plugin"] /* THIS IS YOUR CUSTOM PLUGIN SHOW IN CKEDITOR */
}
]
});
</script>
No comments:
Post a Comment