<a-col :span="24">
<a-form-model-item label="项目介绍" :label-col="{ span: 3 }" :wrapper-col="{ span: 19 }">
<div id="editorElem"></div> //第四步：标签里使用
</a-form-model-item>
</a-col>
<script>
import E from "wangeditor" //第一步：npm 下载并引入
let editor = null
export default {
data() {
return {
pmProjectInfo: {
projectDecs: '',//项目介绍
},
};
},
mounted() {
this.$nextTick(() => {
this.editorConfigure() //第二步：基本配置
})
},
methods: {
//富文本框配置项
editorConfigure() {
editor = new E("#editorElem");
editor.customConfig.onchange = html => {
this.pmProjectInfo.projectDecs = html; //第五步：获取富文本框的值
};
editor.customConfig.menus = [
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"quote", // 引用
"emoticon", // 表情
"image", // 插入图片
"table", // 表格
"video", // 插入视频
"code", // 插入代码
"undo", // 撤销
"redo" // 重复
];
editor.customConfig.zIndex = 100;
//过滤掉复制文本中自带的样式,默认开启
editor.customConfig.pasteFilterStyle = false;
// 自定义处理粘贴的文本内容
// editor.customConfig.pasteTextHandle = function (content) {
// // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
// return (
// "<p style='text-align:center;color:red;border-bottom:1px solid #DCDFE6;border-top:1px solid #DCDFE6;'>以下内容来源于网络,或者复制过来</p>" +
// content +
// "<p style='text-align:center;color:red;border-bottom:1px solid #DCDFE6;border-top:1px solid #DCDFE6;'>以上内容来源于网络,或者复制过来</p>"
// );
// };
editor.customConfig.linkImgCallback = function (url) {
console.log(url); // url 即插入图片的地址
};
editor.customConfig.linkCheck = function (text, link) {
console.log(text); // 插入的文字
console.log(link); // 插入的链接
return true; // 返回 true 表示校验成功
// return '验证失败' // 返回字符串，即校验失败的提示信息
};
// 自定义配置颜色（字体颜色、背景色）
editor.customConfig.colors = [
"#000000",
"#eeece0",
"#1c487f",
"#4d80bf",
"#c24f4a",
"#8baa4a",
"#7b5ba1",
"#46acc8",
"#f9963b",
"#ffffff"
];
// 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
editor.customConfig.emotions = [
{
// tab 的标题
title: "默认",
// type -> 'emoji' / 'image'
type: "image",
// content -> 数组
content: [
{
alt: "[坏笑]",
src:
"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png"
},
{
alt: "[舔屏]",
src:
"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png"
}
]
},
{
// tab 的标题
title: "emoji",
// type -> 'emoji' / 'image'
type: "emoji",
// content -> 数组
content: ["😀", "😃", "😄", "😁", "😆"]
}
];
// 自定义字体
editor.customConfig.fontNames = [
"宋体",
"微软雅黑",
"Arial",
"Tahoma",
"Verdana"
];
// 隐藏“网络图片”tab
editor.customConfig.showLinkImg = false;
// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片不建议使用这种，我只是图个方便
// editor.customConfig.uploadImgServer = '/upload' // 上传图片到服务器
editor.create(); //第三步：创建
}
},
}
</script>
//=================================================
resetForm() {
editor && editor.txt.html('') //第六步：清空操作
editor && editor.txt.html(this.pmProjectInfo.projectDecs)//赋值操作
this.$nextTick(() => {
this.tsSkuTab = obj.tsSkuTab //赋值操作，需要重新渲染
});
},
