在Angular项目下使用Umeditor

标签：官方   load   var   tor   上传   而且   文件路径   editor   需要   

　　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="./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

标签：官方   load   var   tor   上传   而且   文件路径   editor   需要   

原文地址：http://www.cnblogs.com/mazhaokeng/p/6675877.html