在Angular项目下使用Umeditor

时间:2024-01-12 16:33:50

  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文件:

  在Angular项目下使用Umeditor

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

  在Angular项目下使用Umeditor

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

  在Angular项目下使用Umeditor

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

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

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

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

  在Angular项目下使用Umeditor

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

  在Angular项目下使用Umeditor

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