1. 導入
js:
ueditor.config.js
ueditor.all.js
css/images/plugin:
themes
lang
dialog(可選)
third-party(可選)
2. 配置
修改 ueditor.config.js 的 UEDITOR_CONFIG
a. 定義 themes, lang, third-party 的路徑,如果是在同一文件夾下,定義 UEDITOR_HOME_URL 就可以了
否則分別修改 themePath, langPath, UEDITOR_HOME_URL
b. 定義工具欄 toolbars
simpleupload : 簡單上傳:點擊按鈕,直接選擇文件上傳
insertimage : 插入圖片,會呼起彈窗
c. 其它配置(只列出修改的幾條,更多見文檔:http://ueditor.baidu.com/doc/)
initialFrameHeight : 編輯器默認高度
enableContextMenu : 右鍵菜單開關
enableAutoSave : 是否自動保存
topOffset : 工具欄懸浮時 top 值
imageScaleEnabled : 圖片壓縮開關
elementPathEnabled : 啟用元素路徑開關
catchRemoteImageEnable : 遠程抓取圖片開關
iframeCssUrl : 富文本 iframe 中導入的 css 外鏈文件
wordCount : 字數統計開關
d. 插件
simpleupload : 簡單上傳:點擊按鈕,直接選擇文件上傳
修改上傳接口和回調函數,修改接口可以統一在 getActionUrl 中定義,下同
insertimage : 插入圖片,會呼起彈窗
修改上傳接口和回調函數
autoupload : 拖放文件到編輯區域,自動上傳並插入到選區
修改上傳接口和回調函數
catchremoteimage : 遠程圖片抓取,當開啟本插件時所有不符合本地域名的圖片都將被抓取成為本地服務器上的圖片
修改上傳接口和回調函數
catcherFieldName : 上傳接口中的 form name
catcherLocalDomain : 定義不做替換的圖片 domain
e. 自定義按鈕
參見:http://fex.baidu.com/ueditor/#dev-developer
3. 遇到的問題
a. 想在富文本中插入一個自定義結構,獨立模塊,不可編輯,不可部分刪除
參考微信公眾號,插入一個 iframe,子 iframe 中加 onclick,點擊時選中子 iframe(ie, ff 無法選中)
b. 插入圖片后只顯示一半,編輯器高度沒有自動變化,focus 時才撐高
插入圖片后 fire: me.fireEvent("contentchange");
c. simpleupload 沒有 title
找到 initUploadBtn ,給 input 加個 title
d. 想在工具欄和富文本 iframe 中間插入一些內容
參考微信公眾號,在 EditorUI.prototype 的 getHtmlTpl 中插入
e. http 請求多個 css 文件,而且是用 js 異步加載的,會出現臨時樣式不對的情況
將需要的 css 合並壓縮成一個文件,在 head 引入,去掉 UE.ui.Editor 中用 js 引入 css 的部分
f. 在 IE 下 iframeCssUrl 指定的文件加載了,但竟然不生效也是醉了
直接在 Editor.prototype 的 render 中寫入樣式