zoukankan      html  css  js  c++  java
  • umeditor 踩坑

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

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

      

  • 相关阅读:
    准备Activiti环境(2)
    准备Activiti环境
    Activiti工作流的简单介绍
    html(5) css
    html(4)表单
    html(3)框架标签,内联框架
    字符输出流写文本文件【Writer、FileWriter 、BufferedReader 】
    二进制文件的读写
    字符输入流读取文本文件【Reader、FileReader、BufferedReader 】
    字节输入流写文本文件【OutputStream、FileOutputStream】
  • 原文地址:https://www.cnblogs.com/lyxverycool/p/8981896.html
Copyright © 2011-2022 走看看