百度ueditor富文本编辑器插入html代码不显示问题

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

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

需要修改的文件分别是ueditor.all.js和themes\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命令。

你可以通过搜索bold、italic或subscript等来找到下面的代码：

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按钮的功能，接下来只需要压缩js和css文件即可，你可以选择自己喜欢的工具进行压缩，并覆盖同目录下的min.js和min.css后缀的文件。

自定义UEditor插件扩展：添加新的支持code标签的按钮功能

分享至微信分享