ckeditor_3.6.4添加插件方法

搜索

您当前位置：首页 > 文章中心 > 网页编程 > Javascript

【Javascript】

下载

新闻

文章

CKEditor 是目前市场上比较灵活的在线WYSIWYG编辑器之一. 它灵活的设计, 开放的API和详细的文档使得用户扩展功能非常容易. 本文尝试勾勒出 CKEditor插件开发的基础，包含了增加按钮，对话框和执行命令.

ckeditor_3.6.4添加插件方法：

1.在ckeditor\plugins\下新建insertcode目录，然后再新建imaes目录存放code.gif按钮图片。

2.在insertcode目录下新建insertcode.js文件，即ckeditor\plugins\insertcode.js 代码如下：

CKEDITOR.dialog.add('insertcode', function(a){
	var b = a.lang.insertcode;
    return {
        title:b.title,
        resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
        minWidth: 500,
        minHeight: 300,
        contents: [{
            id: 'cb',
            elements: [{
                type: 'select',
                label: b.selectl,
                id: 'lang',
                required: true,                
                items: [['asp/vb', 'vb'], ['javascript', 'jscript'], ['css', 'css'], ['xml', 'xml'], ['php', 'php'], ['java', 

'java'], ['spl', 'spl']],
				'default': 'asp/vb'
            }, {
                type: 'textarea',
                label: b.inputc,
                id: 'code',
				rows:14,
                'default': ''
            }]
        }],
        onOk: function(){
            code = this.getValueOf('cb', 'code');
            lang = this.getValueOf('cb', 'lang');
			if (lang==""){
				alert("请选择脚本语言");
				return false;
			}else if(code==""){
				alert("请输入代码");
				return false;
			}else{
				a.insertHtml("<pre name=\"code\" class=\"" + lang + "\">" + escape(code) + "</pre>");
			}			
        },
        onLoad: function(){}
    };
});

3.在ckeditor.js里添加代码 plugins:'about,insertcode,basicstyles' 其实就是给工具栏里添加按钮，如果有另定义按钮栏也要相应加入。同时对应加上：

j.add('insertcode', {requires: ['dialog'],init: function(l){l.addCommand('insertcode', new a.dialogCommand

('insertcode'));l.ui.addButton('insertcode', {label: l.lang.insertcode.title,command: 'insertcode',icon: this.path + 

'images/code.gif'});a.dialog.add('insertcode', this.path + 'insertcode.js');}});

也就是找到其他j.add()字样在后面加上。使工具栏按钮能正常调用。

4.在语言包里对应加上翻译：

//ckeditor\lang\zh-cn.js文件
,insertcode:{title:'插入源代码',selectl:'选择脚本语言',inputc:'输入代码'}
//cheditor\lang\en.js文件
,insertcode:{title:'Insert Code',selectl:'Select Language',inputc:'input code'}

至此插件算完成。