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