[vue]在vue中使用wangEditor富文本编辑器

通过npm install wangeditor --save -dev 安装
通过editor.txt.html()编辑器里面的内容；
还有vue-wangeditor这个专供vue里面使用的模块暂时没用过，有兴趣的话可以研究下；
弄好vue-wangeditor的小伙伴记得贴在bug搜集上面下




<template>
    <div>
        <div>
            <h1>给我留言</h1>
            <div id="editor"></div>
            <div class="menuBtn" >
                <el-button @click="getEditor" type="info">提交</el-button>  
            </div>
        </div>
    </div>
</template>




<script>
    import Editor from 'wangeditor'
    export default {
        name: "Contact",
        data() {
            return {
                editor: '',
                editorValue: ''
            }
        },
        methods: {
            getEditor () {
                this.editorValue = this.editor.txt.html();
                console.log(this.editorValue);
            },
            async initEditor() {
                this.editor = new Editor('#editor');
                /* 括号里面的对应的是html里div的id */
                /* 配置菜单栏 */
                this.editor.customConfig.menu = [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'emoticon',  // 表情
                    'image',  // 插入图片
                    'table',  // 表格
                    'code',  // 插入代码
                    'undo',  // 撤销
                    'redo'  // 重复
                ];
                this.editor.customConfig.uploadImgMaxLength = 5; // 限制一次最多上传5张图片
                this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
                /* 将图片大小限制为 3M 默认为5M /
                       /* 自定义图片上传（支持跨域和非跨域上传，简单操作）*/
                this.editor.customConfig.customUploadImg = async (files, insert) => {
                    /* files 是 input 中选中的文件列表 */
                    let formData = new FormData();
                    formData.append('file', files[0]);
                    let data = await this.upload(formData);
                    /* upload方法是后台提供的上传图片的接口 */
                    /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/
                    insert(data.imgUrl)
                };
                this.editor.customConfig.onchange = (html) => {
                    /* html 即变化之后的内容 */
                };
                this.editor.create()
                /* 创建编辑器 */
            }
        },
        mounted () {
            this.initEditor()
        }
    }
</script>




<style scoped>
    #editor{
        width: 80%;
        margin: 50px auto;
    }
    .menuBtn{
        margin-top: 20px;
    }
</style>