码迷,mamicode.com
首页 > 其他好文 > 详细

umeditor 踩坑

时间:2018-05-02 20:56:48      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:dex   get   文本编辑   ring   scope   含义   substr   ini   相对   

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.弹窗的时候编辑器没有渲染

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

 

 

 

 

 

  

umeditor 踩坑

标签:dex   get   文本编辑   ring   scope   含义   substr   ini   相对   

原文地址:https://www.cnblogs.com/lyxverycool/p/8981896.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!