关于富文本插件wangEditor的常规性问题总结
官网地址:https://www.wangeditor.com
1、网页粘贴的内容,样式不全,部分样式被冲掉
可通过以下两行代码设置 来关闭样式过滤。
editor.config.pasteFilterStyle = false
editor.config.pasteTextHandle = true
2、压缩后的代码回显在富文本框内
editor.txt.html(`<p>${this.modifyThe.blogContent}</p>`)
3.直接上代码
<template>
//先创建富文本的编辑区域
<div id="div1" v-model="blogContent"></div>
<template>
<script>
import VueFroala from 'vue-froala-wysiwyg'; // npm i wangeditor --save 下载引用
export default {
data (){
return {
blogContent:"",
editor:null
}
},
mounted(){
const editor = new e(`#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>