CKEditor 添加自定义插件

本文介绍如何为CKEditor添加自定义代码高亮功能,包括创建新插件、配置工具栏按钮及实现对话框等内容。
CKEditor是个强大的编辑器,在很多项目中都是用这个编辑器让user编辑页面。因为接口十分类似Word,所以一般人都能轻易上手。只是最好还是要有Html的底子,不然有时候要排版也是会有困难。
 
 网络上已经有不少人实做出来,只是我这人很爱自己做轮子,想说趁这个机会学起来,以后如果真的要客制化功能,也许用的到!基本的CKeditor的安装跟使用还有跟CKFinder整合我就不多说啦。直接进入正题,自定义一个ToolBar按钮。将CKEditor下载回来解压缩丢到网站目录中,在ckeditor文件夹下可以看到一个"config.js"档,这档案是拿来做一些设定用的先贴上我的:
 
CKEDITOR.editorConfig = function (config) {
    config.uiColor = '#AADC6E';
    config.contentsCss = ['/Content/layout.css''/Content/html.css'];
    config.toolbar_Full =
    [
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Undo''Redo''-''SelectAll''RemoveFormat'],
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize''ShowBlocks','-','About'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image''Flash''Table''HorizontalRule''Smiley''SpecialChar''PageBreak'],
    ['Code']
    ];
    config.extraPlugins = 'CodePlugin';
};

前几行的设定都是一般的设定,uiColor是ckeditor的框框颜色,contentsCss是可以将css档加载,在编辑时就可以看到套用css后的效果。toolbar_Full是设定所要的功能,因为有很多我都用不到,所以就剩下上面所列的这些,注意最后一个['Code'],这不是内建的功能,这是我待会要扩充的功能,因此先放到toolbar中。最后一行也是比较重要的就是 config.extraPlugins = 'CodePlugin';
CodePlugin就是等等我们扩充的功能名称(可自定义)。

接着在ckeditor/plugins底下新增一个同上面那个名称的文件夹,并在里面加入一个plugin.js档,如下图所示:

接着就在plugin.js档内加入下面的code:

 

CKEDITOR.plugins.add('CodePlugin',
{
    init: function (editor) {
        // Add the link and unlink buttons.
        editor.addCommand('CodePlugin'new CKEDITOR.dialogCommand('CodePlugin')); //定義dialog,也就是下面的code
        editor.ui.addButton('Code',     //定義button的名稱及圖片,以及按下後彈出的dialog
        {                               //這裡將button名字取叫'Code',因此剛剛上方的toolbar也是加入名為Code的按鈕
            label: '插入高亮程式碼',
            icon: '',
            command: 'CodePlugin'
        });
        //CKEDITOR.dialog.add( 'link’, this.path + 'dialogs/link.js’ );  
        //dialog也可用抽離出去變一個js,不過這裡我直接寫在下面
        CKEDITOR.dialog.add('CodePlugin'function (editor) {       
        //以下開始定義dialog的屬性及事件           
            return {                        //定義簡單的title及寬高
                title: '插入程式碼',
                minWidth: 500,
                minHeight: 400,
                contents: [              
                    {
                        id: 'code',
                        label: 'code',
                        title: 'code',
                        elements:              //elements是定義dialog內部的元件,除了下面用到的select跟textarea之外
                            [                  //還有像radio或是file之類的可以選擇
                            {
                                type: 'select',
                                label: 'Language',
                                id: 'language',
                                //required: true,
                                'default''csharp',
                                items: [['C#''csharp'], ['CSS','css'], ['Html''xhtml'], ['JavaScript''js'], ['SQL''sql'], ['XML''xml']]
                            }
                            , {
                                id: 'codecontent',
                                type: 'textarea',
                                label: '請輸入程式碼',
                                style: 'width:700px;height:500px',
                                rows: 30,
                                'default'''
                            }
                            ]
                    }
                    ],
                onOk: function () {                                    //當按下ok鈕時,將上方定義的元件值取出來,利用insertHtml
                     code = this.getValueOf('code''codecontent');    //將組好的字串插入ckeditor的內容中
                     lang = this.getValueOf('code''language');
                     editor.insertHtml("<pre class=\"brush:" + lang + ";\">" + code + "</pre>");
                
           };   
       }); 
    
})

 基本上这样就好了。其实不难,只是有点繁琐而已。先来看看结果:


按下确定之后,就会生出我们设定的Tag来,其余的东西,就是要记得加载高亮语法的套件啰。
 


注意事项:在editor.css 中添加自定义插件的icon,例如.cke_button__code_icon {background: url(icons.png?t=20af917) no-repeat 0 -960px !important;};



评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值