前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

文本編輯器 Word GitHub JSP IT痕跡 IT痕跡 2017-10-13

UEditor是一個開源(MIT協議)的所見即所得富文本編輯器,由BAT公司之一的百度開發,簡單易用、功能強大、可定製。同時它還擁有一個簡單的富文本編輯器UMeditor,體積更小,加載速度加快,適合大部分網站對於簡單發帖的需求。

1、下載及初始化實例

http://ueditor.baidu.com/website/download.html

開發版為UEditor、mini版為UMeditor,Ubuilder為定製版,按照你的需求選擇下載,下載完成後解壓把文件放到項目任意位置,在需要富文本編輯器的頁面引入ueditor.config.js(配置文件)、ueditor.all.js(編輯器源碼文件)、zh-cn.js(中文語言,不必須它會自動加載)三個文件。

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

然後在body中創建一個加載編輯器的容器,不一定用script可以是其他元素,如textarea等。

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

最後運行如下腳本,刷新頁面一個簡單的demo就初始化完成了。

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

UMeditor初始化基本類似,效果如下,功能少了很多,但是也更加簡介,使用更順暢。

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

2、功能展示

⑴自定義工具欄

配置toolbars屬性自定義工具欄,使用我們需要的功能,不配置則使用ueditor.config.js文件中默認的,完整的按鈕列表請前往http://fex.baidu.com/ueditor/#start-toolbar查看。

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑵設置和獲取編輯器內容

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑶自定義字體

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑷自定義字號

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑸自定義段落

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑹間距

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑺右鍵功能

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑻啟用禁用

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑼word表格粘貼

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑽上傳配置

內置的上傳地址,建議自己寫,使用內置上傳,配置文件在jsp/config.json文件中。

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑾快捷鍵

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

⑿數學公式

前端開發:百度開發的開源所見即所得富文本WEB編輯器(UEditor)

API文檔:

http://fex.baidu.com/ueditor/

github地址:

https://github.com/fex-team/ueditor


ueditor功能非常多,配置方面除了以上的,還有主題、自動保存、tab按鍵配置、純文本粘貼過濾等配置;功能有文件、視頻、音頻、圖像等上傳、模板使用、表格創建編輯等富文本編輯器基礎功能。

有哪裡寫得不好的地方請大家提出來,請輕噴,謝謝。 同時有什麼與編程相關的好東西可以推舉給我,再次感謝!

相關推薦

推薦中...