首页 > 代码库 > 在Angular项目下使用Umeditor
在Angular项目下使用Umeditor
Umeditor是百度旗下的开源富文本编辑器项目,目前用于百度贴吧,是ueditor的迷你版本。
公司的Angular后台管理项目需要上传一些新闻,用Umeditor十分适合。但是目前官方只提供Jsp,Asp,Php和.net版本,也就是说只支持一般页面应用。而每次初始化编辑器时,都需要加载一次
umeditor.min.js文件:
<script type="text/javascript" charset="utf-8" src="./js/lib/umeditor/umeditor.min.js"></script>
否则只运行 var um = UM.getEditor(‘myEditor‘) 是无法初始化编辑器。估计原因是umeditor.min.js文件中就有编辑器初始化的代码。
Angular这种单页面应用,一般只加载一次js文件,然后在各个路由中都可以使用,不会主动去运行这些js文件,这就是很多人问“为什么angular路由中的umeditor在第一次点进来时候有,第二次点的时候就不出现”的原因了。要解决这个问题,必须要每次进入带有umeditor的路由页码时,都要加载一次umeditor.min.js文件。
这里使用oclazyload插件,可以按需加载js文件。oclazyload使用方式:
1. 安装依赖模块 cnpm install oclazyload --save
2. 引入js文件 <script src="http://www.mamicode.com/js/lib/ocLazyLoad.min.js"></script>
3. 依赖注入 var myApp = angular.module("MyApp", ["oc.lazyLoad"]);
4. 最后在控制器或者自定义服务中使用它的load函数加载,加载完成后再执行实例化函数。记住不能缓存,否则下次进入页面时就不会执行load函数。
$ocLazyLoad.load([ { files: [‘./js/lib/umeditor/umeditor.min.js‘], //文件路径 cache: false //不缓存 } ]).then(function () {var um = UM.getEditor(‘myEditor‘); //实例化编辑器 });
这样就可以实现Angular中使用Umeditor啦!
(PS:之前看到有人把ueditor封装成Angular指令,但是我几经折腾也没有成功插入,而且那个项目也有几年没有维护了,所以放弃使用。)
在Angular项目下使用Umeditor