关于富文本插件wangEditor的常规性问题总结

关于富文本插件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>