UEditor是百度提供的一款功能強大的文本編輯器,具有輕量、可定制、用戶體驗優(yōu)秀等特點。開源基于BSD協(xié)議,所有源代碼在協(xié)議允許范圍內(nèi)可自由修改和使用。百度UEditor的推出,可以幫助不少網(wǎng)站開發(fā)者在開發(fā)富文本編輯器所遇到的難題,節(jié)約開發(fā)者因開發(fā)富文本編輯器所需要的大量時間,有效降低了企業(yè)的開發(fā)成本。你可以把UEditor安裝在很多后臺中
軟件亮點
*用戶體驗
屏蔽各種瀏覽器之間的差異,提供良好的富文本編輯體驗。
*定制下載
細粒度拆分核心代碼,提供可視化功能選擇和自定義下載。
*開源免費
開源基于MIT協(xié)議,支持商業(yè)和非商業(yè)用戶的免費使用和任意修改。
*功能全面
涵蓋流行富文本編輯器特色功能,獨創(chuàng)多種全新編輯操作模式。
*專業(yè)穩(wěn)定
百度專業(yè)QA團隊持續(xù)跟進,上千自動化測試用例支持。
軟件優(yōu)勢
*滿足不同層次用戶需求,更加適合團隊開發(fā)
*體積小巧,性能優(yōu)良,使用簡單
*豐富完善的中文文檔
*多個瀏覽器支持:Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome
*分層架構(gòu),方便定制與擴展
*擁有專業(yè)QA團隊持續(xù)支持,已應(yīng)用在百度各大產(chǎn)品線上
*更好的使用體驗
軟件使用教程
Ueditor編輯器軟件特色
體積小巧,性能優(yōu)良,使用簡單
分層架構(gòu),方便定制與擴展
滿足不同層次用戶需求,更加適合團隊開發(fā)
豐富完善的中文文檔
多個瀏覽器支持:Mozilla, MSIE, FireFox, Maxthon,Safari和Chrome
更好的使用體驗
擁有專業(yè)QA團隊持續(xù)支持,已應(yīng)用在百度各大產(chǎn)品線上
Ueditor編輯器怎么安裝?
1、引用JS;
ueditor.config.js
ueditor.all.min.js
lang/zh-cn/zh-cn.js
<script src="__plus__/ueditor/ueditor.config.js"></script>
<script src="__plus__/ueditor/ueditor.all.min.js"></script>
<script src="__plus__/ueditor/lang/zh-cn/zh-cn.js"></script>
2. 編輯器顯示處 id="content"
<textarea id="content" name="content"></textarea>
3.底部
<script type="text/javascript">
//實例化編輯器
//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實例,如果在某個閉包下引用該編輯器,直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實例
UE.getEditor('content',{initialFrameWidth:1500,initialFrameHeight:400,});
</script>
效果:
4.ueditor編輯器按鈕配置方法
定制工具欄圖標(biāo)
UEditor 工具欄上的按鈕列表可以自定義配置,只需要通過修改配置項就可以實現(xiàn)需求
配置項修改說明
修改配置項的方法:
js方法
<script type="text/javascript">
//實例化編輯器
//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實例,如果在某個閉包下引用該編輯器,直接調(diào)用UE.getEditor(‘editor’)就能拿到相關(guān)的實例
UE.getEditor(‘content’,{initialFrameWidth:700,initialFrameHeight:400, toolbars: [[‘bold’, ‘italic’, ‘underline’, ‘fontborder’, ‘strikethrough’, ‘superscript’, ‘subscript’,
‘removeformat’, ‘formatmatch’, ‘autotypeset’, ‘blockquote’, ‘pasteplain’, ‘|’, ‘forecolor’, ‘backcolor’, ‘insertorderedlist’, ‘insertunorderedlist’,
‘selectall’, ‘cleardoc’]]});
</script>
>```
2. 方法二:實例化編輯器的時候傳入 toolbars 參數(shù)(寫在script代碼塊里)
>`var ue = UE.getEditor(‘container’);`
簡單列表-注意toolbars數(shù)組里面只有一個數(shù)組時,編輯器上只有會有一行按鈕,沒有換行
toolbars: [[‘fullscreen’, ‘source’, ‘undo’, ‘redo’, ‘bold’]]
若想有多行列表-toolbars數(shù)組里面要有多個數(shù)組,每個數(shù)組占一行
例子:
把下面的代碼放入高度后面:
```html
toolbars: [['fullscreen', 'source', 'undo', 'redo','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript','removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','selectall', 'cleardoc']]
<script type="text/javascript">
//實例化編輯器
//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實例,如果在某個閉包下引用該編輯器,直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實例
UE.getEditor('content',{initialFrameWidth:800,initialFrameHeight:400,toolbars: [['fullscreen', 'source', 'undo', 'redo','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript','removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','selectall', 'cleardoc']]});
</script>