官网地址：https://www.wangeditor.com
1、网页粘贴的内容，样式不全，部分样式被冲掉
可通过以下两行代码设置 来关闭样式过滤。
editor.config.pasteFilterStyle = false
editor.config.pasteTextHandle = true
2、压缩后的代码回显在富文本框内
editor.txt.html(`<p>${this.modifyThe.blogContent}</p>`)
3.直接上代码
<template>
//先创建富文本的编辑区域
<divid="div1"v-model="blogContent"></div>
<template>
<script>
importVueFroalafrom'vue-froala-wysiwyg';// npm i wangeditor --save 下载引用
exportdefault{
data(){
return{
blogContent:"",
editor:null
}
},
mounted(){
consteditor=newe(`#div1`)//创建一个deitor实例并且挂载到div1上
editor.config.pasteFilterStyle=false// 粘贴过滤图片样式
editor.config.pasteTextHandle=true
// 配置 onchange 回调函数，将数据同步到 vue 中
editor.config.onchange=(newHtml,a,b)=>{
this.ruleForm.blogContent=newHtml
}
editor.config.uploadImgShowBase64=true
editor.config.showLinkImg=false
editor.config.menus=[
'head',// 标题
'bold',// 粗体
'fontSize',// 字号
'fontName',// 字体
'italic',// 斜体
'underline',// 下划线
'strikeThrough',// 删除线
'indent',// 缩进
'lineHeight',// 行高
'foreColor',// 文字颜色
'backColor',// 背景色
'list',// 序列
'justify',// 对齐
'quote',// 引用
'table',//表格
'splitLine',//分割
'image',
'undo',
'redo',
'黑体',
'仿宋',
'楷体',
'标楷体',
'华文仿宋',
'华文楷体',
'宋体',
'微软雅黑',
'#0064B9'
];
editor.create()//创建编辑器----切记，创建编辑器一定要放在最后
this.editor=editor
},
beforeDestroy() {
// 调用销毁 API 对当前编辑器实例进行销毁
this.editor.destroy()
this.editor=null
},
methods:{
//富文本内容回显
this.editor.txt.html(`<p>${this.modifyThe.blogContent}</p>`)
this.editor.txt.clear()// 清空富文本内容
}
}
</script>
