UEditor編輯器功能特色介紹及使用技巧詳細(xì)說(shuō)明

百度UEditor是由百度Web前端研發(fā)部開(kāi)發(fā)的，在使用過(guò)程中能夠?qū)崿F(xiàn)所見(jiàn)即所得的富文本在線編輯器。UEditor編輯器的體積小巧，同時(shí)非常注重用戶體驗(yàn)。該編輯器的界面設(shè)計(jì)非常簡(jiǎn)潔清晰，設(shè)計(jì)方面也非常的人性化，用戶在使用的過(guò)程中，能夠快速便捷的完成各項(xiàng)操作。該軟件開(kāi)源基于BSD協(xié)議，同時(shí)還能夠允許互聯(lián)網(wǎng)開(kāi)發(fā)者自由傳播和使用代碼。UEditor編輯器的推出，能夠幫助各網(wǎng)站開(kāi)發(fā)者在開(kāi)發(fā)富文本編輯器中，解決所遇到的所有難題，同時(shí)還能夠節(jié)約開(kāi)發(fā)者做需要的大量時(shí)間，更有效的降低了企業(yè)的開(kāi)發(fā)成本。

UEditor編輯器 圖一

1. 功能全面：UEditor編輯器中涵蓋了所有流行富文本編輯器的特色功能，該編輯器中提供有多種獨(dú)創(chuàng)的全新編輯操作模式。

2. 開(kāi)源免費(fèi)：該軟件中開(kāi)源基于MIT協(xié)議，同時(shí)還能夠支持商業(yè)和非商業(yè)用戶的免費(fèi)使用和任意修改。

3. 專業(yè)穩(wěn)定：該軟件是由百度專業(yè)的QA團(tuán)隊(duì)持續(xù)跟進(jìn)，通過(guò)上千自動(dòng)化測(cè)試用例支持，是一款非常專業(yè)的富文本在線編輯器。

4. 定制下載：該編輯器中細(xì)粒度拆分核心代碼，能夠?yàn)槭褂谜咛峁┛梢暬δ苓x擇和自定義下載。

5. 用戶體驗(yàn)：在使用這款編輯器的過(guò)程中，能夠屏蔽各種瀏覽器之間的差異，提供良好的富文本編輯體驗(yàn)。

1. 首先我們需要?jiǎng)?chuàng)建一個(gè)web項(xiàng)目，同時(shí)我們將下載好的UEditor直接放在根目錄下面，并將自帶的jar包引入，如下圖所示。

UEditor編輯器 圖二

2. 第二步需要先配置UEditor下面的ueditor.config.js文件，找到window.UEDITOR_HOME_URL = "/項(xiàng)目名稱/ueditor/"；進(jìn)行路徑配置，如下圖所示。

UEditor編輯器 圖三

3. 第三步在我們需要用到富文本編輯器的地方引入js文件，需要引入ueditor.config.js、ueditor.all.js、jquery-2.2.3.min.js三個(gè)文件，如下圖所示。

UEditor編輯器 圖四

4. 第四步需要在頁(yè)面中用一個(gè)文本域來(lái)引入，輸入如下代碼：

<textarea id="contents" name="contents"></textarea>

<script type="text/javascript" charset="utf-8">

var editor = new baidu.editor.ui.Editor();

editor.render("contents")；

</script>

UEditor編輯器 圖五

5. 第五步運(yùn)行項(xiàng)目，可以看到富文本編輯器UEditor已經(jīng)顯示在瀏覽器頁(yè)面上了，如下圖所示。

UEditor編輯器 圖六

6. 第六步如果需要進(jìn)行上傳文件、圖片、視頻，需要配置“ueditor->jsp->config.json”文件，配置圖片、文件、視頻的路徑訪問(wèn)前綴，相對(duì)路徑可以用“..”表示，如下圖所示。

UEditor編輯器 圖七