04月28, 2017

react ueditor记录

项目中需要富文本编辑器,当时查了一下,用ue的人蛮多的,所以就选择了ueditor。

话说react的draft.js,也是个不错的选择,但是它是一个框架,简单来说,要基于它根据需求或者设计,实现整个编辑器。这样一来,有一定的学习成本了。

而且编辑器确实有太多要考虑,如:全屏编辑、toolbar固定、ajax上传单图/多图。有些可能还要支持markdown之类的。其实我本人的想法是图片上传放其他地方(类似七牛云或者淘宝的TMS这种),然后作为编辑器只要能支持markdown语法,或者弹窗输入图片URL即可。奈何产品他们不同意啊。。

扯回来,继续说react和ueditor的结合。在实际项目中,主要有这样的一些坑,要注意的:

路由说明

切路由的时候,记得把ueditor给destroy掉,因为react本身有一套自己的生命周期,不destroy掉,会有问题

建议干掉它的前后约定上传图片,不然后端还要加什么ue的jar包。

在它的代码中有一段:

 /* 判断后端配置是否没有加载成功 */
if (!me.getOpt("imageActionName")) {
    errorHandler(me.getLang("autoupload.errorLoadConfig"));
    return;
}

干掉它。另外上传图片可能除了file,还会有一些额外的参数要传给后端,这时候ueditor显得无能为力了,还得手动改一下源码

simpleUpload这个图片按钮,点击上传需要近七八秒才会弹出系统选择文件框。

这是因为它的源码中:

<input type="file" accept="image/*">

查了很久,让我找到一个资料:插入图片时,选择图片好像很慢才能跳出来,怎么解决

然而蛋疼的是官方web地址是对的,但它给的下载链接编译出来是错的。。还能说啥?

ueditor不支持placeholder

这个网上可以找到具体的解决方案。

但这个也会引起额外的副作用,譬如离开编辑页的时候,要做是否要离开的confirm,会做一个判断是否输入内容,而placeholder的内容不应该被认为是用户输入的内容。

自动保存的bug

其实这个也说不上是bug。产生原因是当ueditor编辑页离开时,会发生(偶发)。根据错误栈,最终想到了一个原因:

UE.registerUI("autosave", function (editor) {
        var timer = null, uid = null;
        editor.on("afterautosave", function () {
            clearTimeout(timer);

            timer = setTimeout(function () {
                if (uid) {
                    editor.trigger("hidemessage", uid);
                }
                uid = editor.trigger("showmessage", {
                    content: editor.getLang("autosave.success"),
                    timeout: 2000
                });

            }, 2000)
        })

    });

这里有一个2s的定时器,那么假设我编辑之后,在2s内离开编辑页,因为离开的时候editor会被销毁掉,所以当它调用editor.getLang就会报错了。

处理方式很简单,只要在getLang这个函数中,简单处理一下就行了。

最后的话

如果有的选,就尽量不要在react中用UE了。。。

本文链接:www.my-fe.pub/post/react-ueditor-bug.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。