Thursday, July 25, 2013

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