Pages
(Move to ...)
Home
Java
Android
Php
Cake PHP
jQuery
Grails
All Pages
▼
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