wangEditor4

1.下载

npm install wangeditor --save

vue文件

<template>
    <div>
       <div ref="editor" class="textNeirong"></div>
    </div>
</template>
<script>
import axios from 'axios'
 import E from 'wangeditor'
export default {
    data(){
        return{
        }
    },
    mounted(){
        this.editor = new E(this.$refs.editor)
        // 配置菜单栏
        this.editor.config.menus = [
            'head', // 标题
            'bold', // 粗体
            'fontSize', // 字号
            'fontName', // 字体
            'italic', // 斜体
            'underline', // 下划线
            'strikeThrough', // 删除线
            'foreColor', // 文字颜色
            'backColor', // 背景颜色
            'indent',//缩进
            'link', // 插入链接
            'list', // 列表
            'justify', // 对齐方式
            'quote', // 引用
            'image', // 插入图片
            'undo', // 撤销
            'redo' // 重复
        ]

        // 上传图片
        this.editor.config.uploadImgServer = 'http://XXXX/upload' 
        this.editor.config.uploadImgMaxLength = 1 // 一次最多上传 1 个图片

        

        // token
        this.editor.config.uploadImgHeaders = {
            token: 'XXXX',
        }
        // 传文件的字段名称
        this.editor.config.uploadFileName = 'file'
        // 其他的参数
        this.editor.config.uploadImgParams = {
            parentPath: 'news',
        }
        // 回调函数
        this.editor.config.uploadImgHooks = {
            // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            customInsert: function(insertImgFn, result) {
                // result 即服务端返回的接口
                if (result.code == '0'){
                    let url = 'http://XXXX' + result.data
                    // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                    insertImgFn(url)
                }
            }
        }
        // 创建富文本编辑器
        this.editor.create()
 
    },
    methods:{
    }
}
</script>
<style scoped>
img{
    width: 200px;
    display: block;
}
</style>