elemenui表格中使用wangEditor富文本编辑器，wangeditor的配置

80 阅读 0 评论 53 点赞

我是靠谱客的博主贪玩蜗牛，最近开发中收集的这篇文章主要介绍elemenui表格中使用wangEditor富文本编辑器，wangeditor的配置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

坑1：使用文本编辑器的时候，文本编辑器会不现实

-->解决方法：在执行完获取列表以后，我添加了一个延迟函数，其实代码可优化成执行完获取列表这个函数以后再执行编辑器的这个方法。

坑2：因为是在表格中使用，通过后台返回的state值来来判断富文本的现实与否，这样就会出现“The given range isn't in document.”

-->因为坑一中添加了延迟函数，这样就是报警告，暂未解决。

步骤一：下载wangeditor包

步骤二：在页面中引用import

代码如下：

........
<el-table-column label="替换" >
<template slot-scope="scope">
<div v-if="scope.row.contentType == 'URL'"></div>
<!-- 轮播图 -->
<div v-if="scope.row.contentType == 'URL_SWIPER'"></div>
<!-- 文本 -->
<div v-else-if="scope.row.contentType == 'INPUT'"></div>
<!-- 1：必填，2：选填 -->
<div v-else-if="scope.row.contentType == 'JUDGE'"></div>
<!-- 富文本 -->
<div v-else-if="scope.row.contentType == 'RICH_TEXT' class="editor">
<div class="editor" style="width:500px;">
<div id="editorElem" style="text-align:left"></div>
</div>
</div>
</template>
</el-table-column>
........
<style>
.editor{
width:500px;
}
</style>

// 获取列表->一进页面需要执行的代码
ationGetPageList(){
cmsModel.getPageList(this.keyword,this.currentPage,this.pageSize)
.then(res=>{
this.TemplateList = res.body.data.fieldList;
this.total = res.body.data.totalRow;
this.TemplateList.forEach(item=>{
if(item.contentType == 'RICH_TEXT'){
this.description = item.content;
}
})
setTimeout(()=>{
this.getEditor();
this.getEditors();
},1000)
})
.catch(err=>{
console.log(err)
})
},
//关于wangeditor的一些配置
getEditor() {
editor.customConfig.menus = [
"bold", // 粗体
"italic", // 斜体
"justify", // 对齐方式
"code" ,// 插入代码
"foreColor",//字体颜色
"fontSize",//字号
"underline",//下划线
"strikeThrough",//删除线
"fontName",//字体
];
editor.customConfig.onchange = html => {
this.description = html;
console.log(this.description)
};
editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
editor.customConfig.showLinkImg = false;
editor.create();
},
// 页面中所用到的各个富文本的数据的回显
getEditors() {
editor.txt.html(this.description);
},

关于wangeditor的配置


this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
this.editor.customConfig.uploadImgServer = uploadPath// 配置服务器端地址
this.editor.customConfig.uploadImgHeaders = { }// 自定义 header
this.editor.customConfig.uploadFileName = 'files' // 后端接受上传文件的参数名
this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
this.editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo', // 重复
'fullscreen' // 全屏
]