vue2中wangeditor富文本编辑器使用方法（详细）

一、wangeditor富文本编辑器的特点
1.基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用
2.WangEditor富文本编辑器配置方便、使用简单、且开源免费
3.各项基本配置基本齐全，适合功能需求简单的项目构建
4.兼容性是支持IE10+的浏览器【】
5.默认正文p、字体样式以span标签的行内样式添加

6.相关链接：快速开始 | wangEditor开源 Web 富文本编辑器，开箱即用，配置简单https://www.wangeditor.com/v5/getting-started.html

二、功能介绍

下图是基本也是全部的功能点

• 包括：【标题设置、字体加粗、斜体、下划线、删除、文字颜色、背景颜色、链接、列表（有序、无序）、表情、图片（网络图片、本地上传）、表格、视频、代码块、返回上一步、返回下一步（但其实ctrl+z快捷键也可以）】
• 

三.正确用法

1.安装：npm i wangeditor --save

2.安装好之后在components下面新建一个wangEditor文件夹

3.wangEditor文件夹下面index的内容如下，直接复制粘贴上去就可以

<template lang="html">

    <div class="editor">

        <div ref="editor" class="textNeirong">

        </div>

    </div>

</template>

<script>

    import E from 'wangeditor'

    import store from '@/store/';

    export default {

        name: 'editoritem',

        data() {

            return {

                // uploadPath,components

                editor: null,

                info_: null,

                token: ''

            }

        },

        model: {

            prop: 'value',

            event: 'change'

        },

        props: {

            value: {

                type: String,

                default: ''

            },

            isClear: {

                type: Boolean,

                default: false

            }

        },

        watch: {

            isClear(val) {

                // 触发清除文本域内容

                if (val) {

                    this.editor.txt.clear()

                    this.info_ = null

                }

            },

            value: function(value) {

                if (value !== this.editor.txt.html()) {

                    this.editor.txt.html(this.value)

                }

            }

            //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值

        },

        created() {

            this.token = 'Bearer ' + store.getters.access_token;

        },

        mounted() {

            this.seteditor()

            this.editor.txt.html(this.value)

        },

        methods: {

            seteditor() {

                this.editor = new E(this.$refs.editor)

                this.editor.config.uploadImgShowBase64 = true // base 64 存储图片

                this.editor.config.uploadImgServer = ''// 填写配置服务器端地址

                this.editor.config.uploadImgHeaders = { 'Authorization': this.token }// 自定义 header

                this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名

                this.editor.config.uploadImgMaxSize = 8 * 1024 * 1024 // 将图片大小限制为 2M

                this.editor.config.uploadImgMaxLength = 6 // 限制一次最多上传 6 张图片

                this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间

                // 自定义 onchange 触发的延迟时间，默认为 200 ms

                this.editor.config.onchangeTimeout = 1000 // 单位 ms



                this.editor.config.onchange = (html) => {

                    this.info_ = html // 绑定当前逐渐地值

                    this.$emit('change', this.info_) // 将内容同步到父组件中

                }

                // 创建富文本编辑器

                this.editor.create()



                this.editor.config.uploadImgHooks = {

                    fail: (xhr, editor, result) => {

                        // 插入图片失败回调

                    },

                    success: (xhr, editor, result) => {

                        // 图片上传成功回调

                    },

                    timeout: (xhr, editor) => {

                        // 网络超时的回调

                    },

                    error: (xhr, editor) => {

                        // 图片上传错误的回调

                    },

                    customInsert: (insertImg, result, editor) => {

                        //循环插入图片

                        let url = result.data.url

                        insertImg(url)

                    }

                }

            }

        }

    }

</script>

<style lang="scss">

    .editor {

        width: 100%;

        margin: auto;

        position: relative;

    }

</style>

4.引入到组件

import WangEditor from '/src/components/wangEditor'---------这里注意路径不要引入错了

  <wangEditor v-model=""  />

用的时候如果富文本层级过高，在样式里添加上下方内容