引入富文本编辑器
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.上传功能未实现
修改配置,路径改为正确路径后即可上传附件视频文件
修改附件保存路径