1. 程式人生 > >百度富文字編輯器Ueditor的使用

百度富文字編輯器Ueditor的使用

前言

最近專案需要整合一個編輯器,於是聽從了同事的推薦用的是百度的Ueditor,整合很順利,本地也很順利,然後部署到linux上就各種不能用。。。
期間也百度了很多的帖子,但是多數帖子都是使用的舊版本,新版本的很少,就算有提問的,也沒有人回覆,沒有辦法,只能自己看原始碼除錯了,功夫不負有心人,現在可以用了,也想分享給大家,以免有的小夥伴重蹈我的覆轍。

使用

我也不說我的嘗試和除錯的過程了,直接上最終的配置

  1. 從百度官網下載http://ueditor.baidu.com/website/ ,看你們具體的伺服器語言,我使用的是Jsp版本,最好是自己也把完整原始碼下載下來,這樣就可以知道它的路徑是怎麼實現的了
    這裡寫圖片描述

  2. 下載完成後將包解壓並重命名為ueditor(個人喜好修改),並放置在Web的根目錄下,如果不是根目錄,需要自行除錯
    這裡寫圖片描述

  3. 將jsp/lib下的jar檔案全部匯入到WEB-INF/lib下

  4. jsp頁面引用editor編輯器,個人建議直接將解壓包裡面附帶的index.html拿來修改,因為它提供了完整的demo

    • 引入三個js
      這裡寫圖片描述
    • 例項化編輯器
      這裡寫圖片描述
      這裡的window.UEDITOR_CONFIG.charset=”utf-8”;是顯示設定字元編碼的,避免獲取到的Html程式碼亂碼
      UEDITOR_CONFIG.UEDITOR_HOME_URL = ‘/pugilist_system/ueditor/’; 這個是重點,可以配置在所有的例項化編輯器前面,我是配置在ueditor.config.js中,指明瞭編輯器的具體位置
  5. 修改兩個配置檔案

    • config.json pugilist_systemTest是我的專案名稱
      這裡寫圖片描述
    • ueditor.config.js
      這裡寫圖片描述

OK,自此搞定,希望能幫到大家。。