在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文件：

　　

　　但是umeditor.min.js被压缩得面目全非，无从下手，所以我们看看ueditor.js：

　　

　　可以看出此js文件就是基于jquery，执行一个巨大的匿名函数来进行初始化。所以方案很简单，给此函数一个名字，后面就可以反复调用而不需要加载文件了：

　　

　　这样切换控制器时，我们只需要执行一次editorInit($)，再运行实例化代码

um = UM.getEditor('myEditor')；//实例化

，就可以顺利加载umeditor了。大家可以把umeditor的所有功能封装成Angular服务，注入到控制器，这样代码就清晰易懂了。

　　最后我们看到，由于我们用umeditor.js替代了ueditor.min.js，不可避免文件体积就变大了：

　　

　　381KB太大了，我们可以把修改过的程序压缩一下。这里推荐一个在线压缩代码的网站：http://tool.oschina.net/jscompress。压缩过后，umeditor.js的大小是178KB，可以接受。

　　

　　（PS：之前看到有人把ueditor封装成Angular指令，但是我几经折腾也没有成功插入，而且那个项目也有几年没有维护了，所以放弃使用。）