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.弹窗的时候编辑器没有渲染
解决办法:当弹窗弹出时,加一个定时器延迟加载编辑器