UEditor扩展:添加新的支持code标签的按钮

在默认的UEditor中,是不能添加code标签的,而作为一名程序员,文章中经常会有代码段和代码字符。代码段可以使用pre标签,但代码字符使用pre就太不方便了,而且现在很多的CSS框架中都对code标签有了默认的样式定义,所以决定在UEditor中加入一个新的按钮,来给选中文字添加code标签。

首先编辑器肯定是UEditor了,我选择的是编译好的版本而非源码,因为UEditor现在基本完善了,改动也不大了,所以这样改起来方便。

需要修改的文件分别是ueditor.all.jsthemes\default\css\ueditor.css,另外需要一张code图标,你可以网上寻找,挑选自己喜欢的。

ueditor.all.js中,我们注册一个按钮:

UE.registerUI('code', function(editor, uiName) {
    var btn = new UE.ui.Button({
        name: "code",
        title: "设为代码",
        cssRules: 'background-position: center center;',
        onclick: function() {
            editor.execCommand('code');
        }
    });
    editor.addListener('selectionchange', function() {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
    return btn;
});

上面的代码可以参考官方文档,基本需要改的就是标签名字、标题和onclick事件调用的命令。

之后我们添加code命令,因为code命令和加粗b斜体i是类似的功能,所以我们在加粗和斜体的地方添加code命令。

你可以通过搜索bolditalicsubscript等来找到下面的代码:

var basestyles = {
    'bold':['strong','b'],
    'italic':['em','i'],
    'subscript':['sub'],
    'superscript':['sup'],
    //这一行就是我们添加的code功能,注意上面一行末尾加上 " , "
    'code':['code']
}

这样我们就完成了添加一个按钮的功能,不过现在按钮显示的图标还是默认样式的,我们需要定义自己的图标,添加下面的代码到css文件:

.edui-for-code .edui-box.edui-icon.edui-default {
    background: url(../images/code.png) no-repeat transparent;
    background-size: 15px 15px;
    background-position: center center;
}

并将url中的图片地址改为你的code图片地址,建议保存在images目录下。

完成以上步骤,我们就完成了添加code按钮的功能,接下来只需要压缩jscss文件即可,你可以选择自己喜欢的工具进行压缩,并覆盖同目录下的min.jsmin.css后缀的文件。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

× 1 = 6