umeditor 踩坑

Posted 2020-11-02 元夕

umeditor 是百度富文本编辑器ueditor的mini版本，它属于轻量级，功能也还好，优点是加载快，貌似只有183k。但是这个维护做的确实不怎么样，

或者压根没人维护，github提了许多issures基本没人解决。

下面说说用的过程主要遇到的坑

1.用requireJs加载的时候加载顺序问题

首先umeditor.js要通过define的方式去写

define("umeditor", ["umeditor.config", "jquery"], function() {
    /*!
     * UEditor Mini版本
     * version: 1.2.2
     * build: Wed Mar 19 2014 17:14:25 GMT+0800 (中国标准时间)
     */

    (function($){

        UMEDITOR_CONFIG = window.UMEDITOR_CONFIG || {};
        window.UM = {
            plugins : {},

            commands : {},

            I18N : {},

            version : "1.2.2"
        };

....................................

})

umeditor.config.js配置根路径

 /**
     * 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。
     * 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
     * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/umeditor/"这样的路径。
     * 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。
     * 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。
     * window.UMEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
    var curWwwPath = window.document.location.href;
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    var localhostPath = curWwwPath.substring(0, pos);
    //文件所在的绝对路径 访问静态资源文件的时候使用此路径
    window.UMEDITOR_HOME_URL=localhostPath+"/core/util/umeditor/";

　但是打包过后会报错，这里可以把i18n和其他东西加到umeditor.js里面，如果一些东西用不到例如link,video ,img,map可以注释掉

然后添加依赖

 paths: {
        //必须要的
        "umeditor": "../../../../../core/util/umeditor/umeditor",
        "dialog": "../../../../../core/service/dialog",
        "umeditor.config": "../../../../../core/util/umeditor/umeditor.config"
    },
 shim: {
        //这一部分是公共插件 是必须要加载的或者使用频率非常高的插件
        "umeditor":{
            deps: ["umeditor.config", "jquery"],
        }
    }

　2.　初始化，第二次进来没有了

 UM.delEditor(‘editor‘);
  $scope.um = UM.getEditor(‘editor‘);

　　这种是因为在调用UE.getEditor(‘_editor’)初始化UEditor时，先从放置编辑器的容器instances中获取，没有实例才实例化一个Editor。

3.弹窗的时候编辑器没有渲染

解决办法：当弹窗弹出时，加一个定时器延迟加载编辑器