QQ客服热线
首页 > 信息资讯 > 技术专栏

技术专栏

如何给CKeditor编辑器增加插件
2013年9月1日
摘要: 为CKeditor编写一个自定义的插件,让你的编辑器成为您的专属编辑器

 CKEditor是一个非常优秀的在线编辑器,先去下载:http://ckeditor.com/

然后我们为编辑器增加一个插件,小卢这边为它命名为“helloworld”,当然你可以取您自己喜欢的名字。

那么这个插件的功能是什么呢?我们这边要做的是代码的高亮显示。简单描述为:为代码片段加个好看的样式。这个样式 ,现在我们也不用自己去定义。因为很多大牛已经给我们准备好了,比如小卢这边用的:SyntaxHighlighter 。关于这款着色库是JS和Css实现的。具体你点击官网:http://alexgorbatchev.com/SyntaxHighlighter/

在您的页面引用JS和样式

<link type="text/css" rel="stylesheet" href="/widget/syntaxhighlighter_2.1.364/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="/widget/syntaxhighlighter_2.1.364/styles/shThemeDefault.css" />
<script type="text/javascript" src="/widget/syntaxhighlighter_2.1.364/scripts/shCore.js"></script>
<script type="text/javascript" src="/widget/syntaxhighlighter_2.1.364/scripts/shBrushes.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = '/widget/syntaxhighlighter_2.1.364/scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>
 
shBrushes.js是经过压缩合成的,把所有代码的的js合并了。
然后在您的页面定义一段代码样式:比如 我放了段js
<pre class="brush:js;"> JS代码</pre>
那么这段JS代码,会有很好看的样式,方便复制和查阅。
 
上面是高亮显示的原来,那么接下去是怎么可以把效果在编辑器里实现插入。 
 

一、创建插件目录结构

 

1、进入到ckeditorplugins目录下,创建目录helloworld,这个目录名称就是我们的插件名称
 
2、在helloworld目录下分别建立三个目录:dialogs、images、lang
 

二、编写插件文件

 每个插件都会有一个plugin.js的插件文件存在于插件目录下,一般使用CKEditor提供的API来进行插件的动态增加。首先,我们在helloworld目录下建立plugin.js文件,使用utf-8存储,该文件的内容如下:

CKEDITOR.plugins.add('helloworld', {
    lang:['zh-cn','en'],
    requires: ['dialog'],
    init: function(a){
        var b = a.addCommand('helloworld', new CKEDITOR.dialogCommand('helloworld'));
        a.ui.addButton('helloworld', {
            label: a.lang.tbTip,
            command: 'helloworld',
            icon: this.path + 'images/hello.png'
        });
        CKEDITOR.dialog.add('helloworld', this.path + 'dialogs/helloworld.js');
    }
});

 

三、插件的对话框

我们在上面的插件文件中写了一个requires: ['dialog'],表示当点击工具栏上的插件图标时会调用一个对话框来进行处理。我们先在helloworld\dialogs目录下建立一个helloworld.js文件,使用utf-8保存,内容如下:

/**
TCNET
*/
CKEDITOR.dialog.add('helloworld', function (editor) {
    var escape = function (value) {
        return value;
    };
    return {
        title: 'Insert Code Dialog',
        resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
        minWidth: 720,
        minHeight: 480,
        contents: [{
            id: 'cb',
            name: 'cb',
            label: 'cb',
            title: 'cb',
            elements: [{
                type: 'select',
                label: 'Language',
                id: 'lang',
                required: true,
                'default': 'csharp',
                items: [['ActionScript3', 'as3'], ['Bash/shell', 'bash'], ['C#', 'csharp'], ['C++', 'cpp'], ['CSS', 'css'], ['Delphi', 'delphi'], ['Diff', 'diff'], ['Groovy', 'groovy'], ['Html', 'xhtml'], ['JavaScript', 'js'], ['Java', 'java'], ['JavaFX', 'jfx'], ['Perl', 'perl'], ['PHP', 'php'], ['Plain Text', 'plain'], ['PowerShell', 'ps'], ['Python', 'py'], ['Ruby', 'rails'], ['Scala', 'scala'], ['SQL', 'sql'], ['Visual Basic', 'vb'], ['XML', 'xml']]
            }, {
                type: 'textarea',
                style: 'width:700px;height:420px',
                label: 'Code',
                id: 'code',
                rows: 31,
                'default': ''
            }]
        }],
        onOk: function () {
            code = this.getValueOf('cb', 'code');
            lang = this.getValueOf('cb', 'lang');
            html = '' + escape(code) + '';
            editor.insertHtml("
" + html + "

"); }, onLoad: function () { } }; });

 

 这段代码呢是插入 高亮显示的核心代码。

四、插件的语言文件支持

CKEditor本身就是支持i18n的,因此我们可以为插件定义多种语言,这样可以适应更多的场合。进入helloworld\lang目录,在这个目录下建立en.js和zh-cn.js两个文件,分别用来支持中文和英文,内容分别如下:

/**
* 支持英文的语言包(文件名称en.js),第一个参数是插件名称
*/
CKEDITOR.plugins.setLang('helloworld', 'en', {
    tbTip: 'Insert Code Plugin Demo',
    mytxt: 'Text',
    dlgTitle: 'Insert Code Plugin Demo(Powered By nbtcnet.com)'
});


/**
* 支持中文的语言包(文件名称zh-cn.js),第一个参数是插件名称
*/
CKEDITOR.plugins.setLang('helloworld', 'zh-cn', {
    tbTip: '插入代码插件',
    mytxt: '文本',
    dlgTitle: '插入代码插件 插件示范(Powered By nbtcnet.com)'
});

 

五、插件的图片指定

我们其实在第二步编写插件文件中中已经指定了插件的图片文件:icon: this.path + ‘images/hello.png’。这里的icon指的就是在编辑器工具栏上显示的图标,我们这里找一个16×16大小的png图片,命名为hello.png,然后放到helloworld\images目录下即可。

 

六、演示验证插件

完成上面5个步骤后,插件基本上就已经完成了。为了能够使插件可以出现在编辑器的工具栏中,我们还需要做如下配置:

1、打开ckeditor\config.js文件,修改内容为如下:

config.uiColor = '#F7F8F9';
    config.toolbar = 'SimpleStyle';
    config.scayt_autoStartup = false;
    config.language = 'zh-cn'; //中文
    config.font_defaultLabel = '宋体';
    config.fontSize_defaultLabel = '18px';
    config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;
    CKEDITOR.config.pasteFromWordPromptCleanup = true;
    
    config.toolbar_SimpleStyle =
    [

        { name: 'toolbar1', items: ["Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript"] },
        { name: 'toolbar2', items: ["NumberedList", "BulletedList", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"] },
        { name: 'toolbar3', items: ["BidiLtr", "BidiRtl"] },
        { name: 'toolbar4', items: ["Link", "Unlink", "Anchor"] },
        { name: 'toolbar5', items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Print"] },
        { name: 'toolbar6', items: ["Preview", "-", "Templates", "-", "helloworld"] },
         "/",
        { name: 'toolbar7', items: ["Styles", "Format", "Font", "FontSize"] },
        { name: 'toolbar8', items: ["TextColor", "Image", "Table"] },
        { name: 'toolbar9', items: ["Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "RemoveFormat"] },
        { name: 'toolbar10', items: ["Maximize", "-", "Source"] }
    ];
    config.extraPlugins += (config.extraPlugins ? ',helloworld' : 'helloworld');

 

其中config.extraPlugins这行是关键,表明这个是我们编写的额外插件,需要集成到CKEditor中去。这个仅仅是注册而已,如果需要显示在工具栏中,还要定义一个toolbar,比如我们这里定义了一个MyBasic的toolbar,并且只选取了CKEditor中最常用的几个工具,然后最后我们增加了helloworld的插件,这样我们就把刚才编写的插件注册到MyBasic的toolbar中了。

现在打开你的编辑器。编辑器上面多了一个helloworld的图片,那就是你做的插件了。

 

来自TCNET 转载请保留www.nbtcnet.com

返回列表