1、介紹：
UEditor富文本編輯器，輕量，可定製，注重用戶體驗。
UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文本web編輯器，具有輕量，可定製，注重用戶體驗等特點，開源基於MIT協議，允許自由使用和修改代碼。
官網下載 API： http://fex.baidu.com/ueditor/#api-common
解壓包下有實例參考： D:\UEditor\ueditor-1.4.3.3\_examples
D:UEditor\ueditor1_4_3_3-utf8-jsp\utf8-jsp
2、ueditor1.4.3的使用：
把這些jar包 5個jar 放到 WEB-INF 目錄下的lib 中。避免重複。
右鍵Build Path ---》Add to Build Path 引用它們。
引入配置文件：
<body>
<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain">
這裏寫你的初始化內容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
3. 編輯 回顯後端數據
不要直接把後端數據放到編譯器容器中，會出現標籤的問題， 通過設置編譯器內容來賦值。
<label >內 容：</label>
<div class="col-md-12">
<input type="hidden" id="content" value="<s:property value='content'/>"/>
<script id="container" name="content" type="text/plain" style="height:350px">
</script>
</div>
<!-- 配置文件 -->
<script type="text/javascript" src="./plugins/uEditor/ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script id="ueditor_script" type="text/javascript" src="./plugins/uEditor/ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container',{toolbars: [
[
'anchor', //錨點
'undo', //撤銷
'redo', //重做
'bold', //加粗
'indent', //首行縮進
'snapscreen', //截圖
'italic', //斜體
'underline', //下劃線
'strikethrough', //刪除線
'subscript', //下標
'fontborder', //字符邊框
'superscript', //上標
'formatmatch', //格式刷
'source', //源代碼
'blockquote', //引用
'pasteplain', //純文本粘貼模式
'selectall', //全選
'print', //打印
//'preview', //預覽
'horizontal', //分隔線
'removeformat', //清除格式
'time', //時間
'date', //日期
'unlink', //取消鏈接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合併單元格
'mergedown', //下合併單元格
'deleterow', //刪除行
'deletecol', //刪除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分單元格
'deletecaption', //刪除表格標題
'inserttitle', //插入標題
'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', //默認
'imageleft', //左浮動
'imageright', //右浮動
'attachment', //附件
'imagecenter', //居中
'wordimage', //圖片轉存
'lineheight', //行間距
'edittip ', //編輯提示
'customstyle', //自定義標題
'autotypeset', //自動排版
'webapp', //百度應用
'touppercase', //字母大寫
'tolowercase', //字母小寫
'background', //背景
'template', //模板
'scrawl', //塗鴉
'music', //音樂
'inserttable', //插入表格
'drafts'// 從草稿箱加載
// 'charts', // 圖表
]
]
}
);
//編輯器準備就緒後會觸發該事件
//初始化設置編輯器內容
ue.ready(function() {
ue.setContent($("#content").val());
});
</script>
參考文章：https://blog.csdn.net/zzq900503/article/details/77540228