引入富文本編輯器

1.下載地址 https://ueditor.baidu.com/website/download.html
2.導入項目
3.文件引用

<!-- 配置文件 --> <script type="text/javascript"src="<%=request.getContextPath()%>/ueditor/ueditor.config.js"></script> <!-- 編輯器源碼文件 --> <script type="text/javascript"src="<%=request.getContextPath()%>/ueditor/ueditor.all.js"></script> <!-- 語言包文件(建議手動加載語言包，避免在ie下，因為加載語言失敗導致編輯器加載失敗) --> <script type="text/javascript"src="<%=request.getContextPath()%>/ueditor/lang/zh-cn/zh-cn.js"></script>

4.頁面使用編輯器

<div><script id="editor" type="text/plain" style="width: 1024px; height: 500px;">${content.content}</script> </div> //實例化編輯器 //建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例 var ue = UE.getEditor('editor');

采坑記錄

1.編輯回顯時內容是代碼

var htmlStr = $("#editorValue").val();ue.ready(function() {ue.setContent(htmlStr, false);});

2.在編輯內容中有表格時,發布成功后前臺表格邊框被隱藏
方法1.創建好表格后右鍵-表格-設置表格邊線可見
bug:前臺展示時表格邊框中油空隙
方法2.修改 ueditor.all.js

UE.commands['inserttable'] = {queryCommandState: function () {return getTableItemsByRange(this).table ? -1 : 0;},execCommand: function (cmd, opt) {function createTable(opt, tdWidth) {var html = [],rowsNum = opt.numRows,colsNum = opt.numCols;for (var r = 0; r < rowsNum; r++) {html.push('<tr' + (r == 0 ? ' class="firstRow"':'') + '>');for (var c = 0; c < colsNum; c++) {html.push('<td style="border:1px solid #000;" width="' + tdWidth + '" vAlign="' + opt.tdvalign + '" >' + (browser.ie && browser.version < 11 ? domUtils.fillChar : '<br/>') + '</td>')}html.push('</tr>')}//禁止指定table-widthreturn '<table style="border-collapse:collapse"><tbody>' + html.join('') + '</tbody></table>'}

3.上傳功能未實現
修改配置,路徑改為正確路徑后即可上傳附件視頻文件
修改附件保存路徑

總結

以上是生活随笔為你收集整理的百度富文本编辑器UEditor的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。