自定义ckeditor的编辑器插件

2016年03月02日 原创
关键词: javascript
摘要 本文介绍如何在ckeditor中新增一个自定义的插件。

ckeditor的插件十分灵活,可以随时增加和减少。在ckeditor官网的文档里也有ckeditor插件的详细编写教程,本文只介绍简单的操作流程,如果需要详细的解释,请看这里(需要翻墙)。

博主的博客时常需要添加代码,因此博主就用自定义的pre插件来讲解吧。

一、创建目录。

在ckeditor/plugins目录下新建一个pre目录,pre目录下新建dialogs目录,icons目录,plugin.js文件。

在icons目录里存放按钮图标,16x16大小,pre.png。在dialogs目录里新建一个pre.js文件。

二、编辑plugin.js 。

CKEDITOR.plugins.add( 'pre', {
    icons: 'pre',
    init: function( editor ) {
        editor.addCommand( 'pre', new CKEDITOR.dialogCommand( 'pre dialog' ) );
        editor.ui.addButton( 'pre', {
			    label: 'pre',
			    command: 'pre',
			    toolbar: 'insert'
				});
				CKEDITOR.dialog.add( 'pre dialog', this.path + 'dialogs/pre.js' );
    }
});

三、编辑pre.js。

CKEDITOR.dialog.add( 'pre dialog', function( editor ) {
    return {
        title: 'Pre classes',
        minWidth: 400,
        minHeight: 200,
        contents: [
            {
                id: 'class',
                label: 'classes:',
                elements: [
                    {
                        type: 'text',
                        id: 'preclass',
                        label: 'classes',
                        validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." )
                    },
                ],
            },{
                id: 'content',
                label: 'content',
                elements: [
                    {
                        type: 'textarea',
                        id: 'precontent',
                        label: 'Content'
                    }
                ]
            }
        ],
        onOk: function() {
            var dialog = this;

            var pre = editor.document.createElement( 'pre' );
            pre.setAttribute( 'class', dialog.getValueOf( 'class', 'preclass' ) );
            pre.setText( dialog.getValueOf( 'content', 'precontent' ) );          
            editor.insertElement(pre);
        }
    };
});

四、配置config.js。

在config.js里添加

config.allowedContent=true;
config.extraPlugins="pre";

 

至此,自定义的ckeditor插件就已经写好了,刷新一下就能看到这样的效果:

pre图标可以自己用Ps做一个,不会费太多时间。

点击之后会弹出一个弹框,其中填写给pre添加的类和pre里的内容。