zoukankan      html  css  js  c++  java
  • 在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指令,但是我几经折腾也没有成功插入,而且那个项目也有几年没有维护了,所以放弃使用。)

     

  • 相关阅读:
    Java+Spring Boot+Shiro前后端分离权限基础框架
    201809~201810 期推荐文章
    Spring Boot 2.0.2 教程
    201808 期推荐文章
    201807 期推荐文章
    Simple-Mult-SSM 基于Simple-SSM扩展Hessian注解的javaweb前后端分离SSM基础框架
    hexo + github 搭建博客系列教程汇总
    DockPanel与GeckoFX、ChrominumFX、CefSharp结合使用问题
    APP并非一个人在战斗,还有API—Xamarin.Android回忆录
    我正在使用Xamarin的跨平台框架—Xamarin.Android回忆录
  • 原文地址:https://www.cnblogs.com/mazhaokeng/p/6675877.html
Copyright © 2011-2022 走看看