百度富文本编辑器UEditor的使用

引入富文本编辑器

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-width
                return '<table  style="border-collapse:collapse"><tbody>' + html.join('') + '</tbody></table>'
            }

3.上传功能未实现
修改配置,路径改为正确路径后即可上传附件视频文件
修改附件保存路径