wangeditor富文本的详细使用，wangeditor的基本配置

示例：

第一步：下载 

        npm  run  wangeditor

第二步：封装子组件 editorComponents

<template>
    <div id="editor" ref="myEditor"></div>
</template>
<script>
  import WangEditor from 'wangeditor'
  import axios from 'axios'
  // 获取token，用于上传图片
  import { ACCESS_TOKEN } from '@/store/mutation-types' 

  export default {
    name: 'ComponentWangeditor',
    data () {
      return {
        edit: '',
        btnmenu:[
            'head',//标题
            'bold',//粗体
            'fontSize',//字号
            'fontName',//字体
            'italic',//斜体
            'undeline',//下划线
            'strikeThrough',//删除线
            'foreColor',//文字颜色
            'backColor',//背景颜色
            'link',//插入链接
            'list',//列表
            'justify',//对齐方式
            'quote',//引用
            'emoticon',//表情
            'image',//插入图片
            'table',//表格
            'video',//插入视频
            'code',//插入代码
            'undo', //撤销
            'redo', // 重复
        ]
      }
    },
    props: {
      value: {
        type: String,
        default: ''
      },
    },
    methods: {
        initEditor () {
            var self = this
            // 初始化
            this.editor = new WangEditor(this.$refs.myEditor)

            this.editor.customConfig = {
                // 设置编辑器层级
                zIndex:999,
                // 配置按钮菜单
                menus:this.btnmenu,
                // 粘贴时不忽略图片
                pasteIgnoreImg: false, 
                // 去掉复制过来的样式
                pasteFilterStyle:true, 
                //限制一次最多上传 9 张图片
                uploadImgMaxLength:9, 
                //图片大小限制为2M
                uploadImgMaxSize:2*1024*1024, 
                // 自定义配置颜色（字体颜色、背景色）
                colors: ['#000000','#eeece0','#1c487f','#4d80bf','#c24f4a','#8baa4a','#7b5ba1'];
                // 自定义字体
                fontNames : ["PingFangSC"],

                // 自定义处理粘贴的文本内容
                pasteTextHandle = function (content) {
                    // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
                    // 例如 ： return content + '<p>在粘贴内容后面追加一行</p>'
                    return content
                },
            };
            
            // 配置 onchange 事件
            this.editor.change = function () { // 编辑区域内容变化时
                // 注意这里的this指向
                self.$emit('input', this.txt.html())
                self.$emit('onchange', this.txt.html(), this.txt)
                // this.txt.html('.....') //设置编辑器内容
                // this.txt.clear() //清空编辑器内容
                // this.txt.append('<p>追加的内容</p>')//继续追加内容。
                // this.txt.text()  // 读取 text
                // this.txt.getJSON()  // 获取 JSON 格式的内容
            }

            //配置上传图片
            this.editor.customConfig.customUploadImg = function (files, insert) {
                var formData = new FormData()
                files.forEach(file => {
                    formData.append('file', file)
                })
                let headers = {
                    Authorization : 'Bearer ' + ACCESS_TOKEN
                }
                axios.post('/api/sysFileInfo/commonUpload', formData, {headers}).then(({ data }) => {
                    if (data.success && data.code === 200) {
                        let  url = data.data.imgUrl
                        insert(url)
                    }
                })
            }

            this.editor.create() // 生成编辑器
            this.editor.txt.text(this.value) // 初始化的时候设置编辑器的内容
            this.$emit('oninit', this.editor)


            // this.editor.$textElem.attr('contenteditable', false);// 禁用编辑功能
            // this.editor.$textElem.attr('contenteditable', true); // 开启编辑功能
      },

    },
    mounted () {
      this.initEditor()
    }
  }
</script>

<style >
  .w-e-toolbar{
    flex-wrap:wrap;
  }

</style>

第三步：父组件使用

<template>
    <editorComponents :value="content" @onchange="changeEditor" @oninit="getEditor" ></editorComponents>    
</template>
<script>
  import editorComponents from './editorComponents'
  export default {
    components:{
        editorComponents
    },
    data () {
      return {
        content:''
      }
    },
    mounted () {
        changeEditor(e){
            console.log(e)
        },

        getEditor(e){
            console.log(e)
        }
    }
  }
</script>