在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指令,但是我幾經折騰也沒有成功插入,而且那個項目也有幾年沒有維護了,所以放棄使用。)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM