????????本文簡單介紹Ueditor富文本編輯器的簡單部署。在如今越來越豐富的富頁面體驗中，我們不僅僅滿足于簡單文本的編輯和展示。而可以由用戶自定義的交互式制作模式，將極大的提高頁面的交互性和靈活性，滿足用戶制作需求。世面上開源的富文本編輯器有很多，比如Ueditor、Kingeditor、markdown等等,本文重點(diǎn)將介紹Ueditor的簡單部署用，其它產(chǎn)品可以參考其官方介紹。

????????一、相關(guān)軟件說明

1、ueditor1_4_3_3-utf8-jsp

2、JDK1.8+

3、pache?tomcat 8.5

????????二、ueditor下載地址

1、官方地址：http://fex.baidu.com/

2、發(fā)布版下載地址：https://github.com/fex-team/ueditor/releases

????????本文以jsp手動部署模式為例，下載utf8編碼格式的jsp版本即可。

????????三、將下載的壓縮包解壓到tomcat下的webapps目錄下，如下圖：

????????四、進(jìn)入tomcat的bin目錄，啟動tomcat，在地址欄中輸入如下地址：http://localhost:8080/ueditor1_4_3_3-utf8-jsp/index.html,看到如下頁面

????????看到以上界面說明靜態(tài)手動部署成功（先別急，到此只能說明成功了一半，不信，打開控制臺或者上傳一張圖片試試）。

控制臺報錯信息如下：

????????以上兩個地方都說明，后臺部署還是有問題，當(dāng)有附件上傳的功能時，系統(tǒng)不能正常提供服務(wù)。如果項目中沒有圖片、多媒體、附件等資源編輯，您可以忽略以上錯誤，直接進(jìn)行集成就可以了（如何解決這些錯誤以及如何自定義上傳將在下次分享）。

????????五、工具條說明

????????toolbar官方介紹：http://fex.baidu.com/ueditor/#start-toolbar

toolbars: [ [ 'anchor', //錨點(diǎn) 'undo', //撤銷 'redo', //重做 'bold', //加粗 'indent', //首行縮進(jìn) 'snapscreen', //截圖 'italic', //斜體 'underline', //下劃線 'strikethrough', //刪除線 'subscript', //下標(biāo) 'fontborder', //字符邊框 'superscript', //上標(biāo) 'formatmatch', //格式刷 'source', //源代碼 'blockquote', //引用 'pasteplain', //純文本粘貼模式 'selectall', //全選 'print', //打印 'preview', //預(yù)覽 'horizontal', //分隔線 'removeformat', //清除格式 'time', //時間 'date', //日期 'unlink', //取消鏈接 'insertrow', //前插入行 'insertcol', //前插入列 'mergeright', //右合并單元格 'mergedown', //下合并單元格 'deleterow', //刪除行 'deletecol', //刪除列 'splittorows', //拆分成行 'splittocols', //拆分成列 'splittocells', //完全拆分單元格 'deletecaption', //刪除表格標(biāo)題 'inserttitle', //插入標(biāo)題 'mergecells', //合并多個單元格 'deletetable', //刪除表格 'cleardoc', //清空文檔 'insertparagraphbeforetable', //"表格前插入行" 'insertcode', //代碼語言 'fontfamily', //字體 'fontsize', //字號 'paragraph', //段落格式 'simpleupload', //單圖上傳 'insertimage', //多圖上傳 'edittable', //表格屬性 'edittd', //單元格屬性 'link', //超鏈接 'emotion', //表情 'spechars', //特殊字符 'searchreplace', //查詢替換 'map', //Baidu地圖 'gmap', //Google地圖 'insertvideo', //視頻 'help', //幫助 'justifyleft', //居左對齊 'justifyright', //居右對齊 'justifycenter', //居中對齊 'justifyjustify', //兩端對齊 'forecolor', //字體顏色 'backcolor', //背景色 'insertorderedlist', //有序列表 'insertunorderedlist', //無序列表 'fullscreen', //全屏 'directionalityltr', //從左向右輸入 'directionalityrtl', //從右向左輸入 'rowspacingtop', //段前距 'rowspacingbottom', //段后距 'pagebreak', //分頁 'insertframe', //插入Iframe 'imagenone', //默認(rèn) 'imageleft', //左浮動 'imageright', //右浮動 'attachment', //附件 'imagecenter', //居中 'wordimage', //圖片轉(zhuǎn)存 'lineheight', //行間距 'edittip ', //編輯提示 'customstyle', //自定義標(biāo)題 'autotypeset', //自動排版 'webapp', //百度應(yīng)用 'touppercase', //字母大寫 'tolowercase', //字母小寫 'background', //背景 'template', //模板 'scrawl', //涂鴉 'music', //音樂 'inserttable', //插入表格 'drafts', // 從草稿箱加載 'charts', // 圖表 ]]

????????六、編輯器配置說明

????????詳細(xì)配置說明可參考：http://fex.baidu.com/ueditor/#start-config，以下為節(jié)選參考：

????????本文簡單說明如何在tomcat中部署ueditor，并舉例介紹了他的api以及相關(guān)工具欄，用戶可以根據(jù)需要進(jìn)行調(diào)整。同時在運(yùn)行時發(fā)現(xiàn)了一些問題，計劃在下一講中介紹如何解決這些錯誤

總結(jié)

以上是生活随笔為你收集整理的富文本编辑器Ueditor实战（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。