在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指令,但是我几经折腾也没有成功插入,而且那个项目也有几年没有维护了,所以放弃使用。)
- Webpack入门——使用Webpack打包Angular项目的一个例子
- gulp 在 angular 项目中的使用
- 使用angular-translate插件进行项目国际化
- angular项目中bootstrap-datetimepicker时间插件的使用
- 【angularjs】pc端使用angular搭建项目,实现导出excel功能
- Angular-UI自动完成输入框AutoComplete[项目中使用]
- Angular CLI在Angular项目中如何使用scss详解
- 不要(不建议)在Angular项目中使用hidden属性
- 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular
- 使用Angular CLI生成 Angular 5项目教程详解
- Webpack入门——使用Webpack打包Angular项目的一个例子
- 在angular-cli项目中使用Scss和Pug(Jade)模板引擎
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
- angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
- 在Angular项目中使用PrimeNG组件
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
- 使用angular-cli构建angular2项目时遇到的问题及解决方案
- angular2.0配置同时使用localhost和本机IP访问项目
- 在Angular项目中使用PrimeNG组件