幻蓝博客 – 孤月蓝风

追寻互联网科技、Unity开发、AR/VR开发、游戏开发、Web前后端开发等技术。

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后缀的文件。


UEditor中JS代码(script标签)被过滤的解决办法


作为一个程序员的博客,在文章中经常会插入各种代码,大部分代码都不会发生问题,但Div和Script标签是经常会被使用到的。

而在之前的文章编写过程中,插入JS代码后,第一次文章会显示正常,而之后在后台编辑器中便只会显示执行过的JS代码,相当于JS代码被过滤掉了。今天研究了一下这个问题,发现解决办法很简单。

我们在插入代码后,源码模式下,看起来是正常的,但是为什么保存完之后,数据库中正常,但是编辑器中不正常呢?

很多富文本编辑器都有两种初始化方式,以UEditor为例,一种是textarea标签,一种是script标签。

textarea方式:

<textarea id="container" name="content">
    这里写你的初始化内容
</script>
<script type="text/javascript" src="ueditor.config.js"></script>
<script type="text/javascript" src="ueditor.all.js"></script>
<script type="text/javascript">
    var ue = UE.getEditor('container');
</textarea>

script方式:

<script id="container" name="content" type="text/plain">
    这里写你的初始化内容
</script>
<script type="text/javascript" src="ueditor.config.js"></script>
<script type="text/javascript" src="ueditor.all.js"></script>
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>

两种方式的区别也只在于容器,我之前一直使用的是textarea方式,因为当时UEditor的script方式有一些小问题。

在今天寻找过滤问题的解决办法时,想了很多办法,看别人的配置文件等,但终究没解决。在不断搜索中,打开UEditor之前的帮助文档,现在官网已经去除了该旧文档的链接,在该文档中看到了这样一个问题:

大部分编辑器的容器都使用textarea,为什么UEditor采用了很特殊的script标签?

答:首先要说明一点的是,UEditor也支持textarea标签作为编辑器的外围容器,只要将对应的标签名字换成textarea即可。除此之外,UEditor还支持使用div和script标签作为其容器。之所以要这样做,只是为了尽最大可能去满足和适应用户的各种不同需求。官方推荐使用script标签的原因是textarea会在提交数据的时候自动对里面的部分html文本进行一次特殊字符转义,从而导致有些不熟悉的用户在再编辑的时候出现编码混乱的问题。而使用script标签可以很好地克服这个缺点。

里面提到了“官方推荐使用script标签的原因是textarea会在提交数据的时候自动对里面的部分html文本进行一次特殊字符转义”,看到这句话后豁然开朗,一切问题的根源都在于容器标签而已,将容器标签修改为script后,一切都正常了。