JS-requireJS中使用UEditor的經驗總結

目前,正在開發的一個項目中,需要用到富文本編輯器,經過一番搜索後,發現用的比較多的是百度前端部門開源的UEditor這個插件,所以就選擇了UEditor。

在查閱了官方文檔之後,發現引入插件的方法是直接引入的,並沒有介紹如何使用require的方式進行引入。
官方文檔中demo的例子,如下圖所示:
這裏寫圖片描述

所以只好結合網上的資料,自己去摸索了,大概的步驟如下:

1 下載資源包

由於我們的後端語言是java,所以下載的是jsp版,並且將其放入jsnext/lib文件夾中:

下載的版本:jsp -> UTF-8

下載的版本

ueditor 放置的目錄:

放置的目錄

2 配置config.js

要在requireJS中引入資源,一般需要在config.js文件中,配置paths,並且聲明其依賴的資源
在這裏,需要引入的資源有:

  1. ueditor.config.js,這是配置文件;
  2. ueditor.all.js,這是主要的文件;
  3. zeroclipboard.js,這是一個第三方的插件,跟粘貼板有關。單獨引入這個文件是因爲要解決會出現 zeroclipboard is undefined 的錯誤,後面會講到。
  4. 同時,ueditor.all.js 需要依賴於 ueditor.config.js,所以需要聲明二者的依賴關係

這裏寫圖片描述

3 初始化UEditor

配置了ueditor所需文件的paths和依賴關係之後,需要在頁面對應的js文件中去初始化UEditor。比如app.js:

這裏寫圖片描述

之所以會有

window.zeroclipboard = zeroclipboard;

是因爲如果不寫這句的話,會出現 zeroclipboard is undefined 的錯誤。

這裏寫圖片描述

4 配置ueditor.config.js中的URL

在初始化ueditor後,會出現報錯:

這裏寫圖片描述
錯誤顯示找不到各類文件,而且該引用地址也是不對的。
這裏需要對ueditor.config.js中的URL進行配置

這裏寫圖片描述
注意:此處的URL是配置的構建之後的路徑。因爲我們項目構建後,會有兩個文件夾:

  • static:放置靜態資源文件,包括js和style兩個文件夾。ueditor 中相關的資料都在js/lib文件夾下面。
  • vm:html文件

    因此,我們的URL設置成上面那樣。這個地方,需要根據項目的實際情況來配置,不同的人可能是不一樣的。

5 最後就需要對後端進行配置

當經過以上四個步驟的配置之後,基本上前端頁面上是能夠正常顯示UEditor的編輯界面的。剩下的就需要後端進行配置了,此處就不展開,畢竟我們只是做前端的。

這裏寫圖片描述

6 在表單中使用ueditor

6.1 表單提交

將ueditor放在內部即可,同時設置好name,$form.serialize()即可獲取其內容

6.2 非空校驗

在提交事件中判斷內容是否爲空,如果爲空,則插入錯誤提示

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章