Lexus-media/src/components/wangEditor.vue

<template>
    <div>
        <div ref="editor"></div>
    </div>
</template>

<script>
    import E from 'wangeditor';
    import { php_url } from "../config/env";
    let editor;
    export default {
        name: 'editor',
        data() {
            return {
                unifiedUrl: "/lexus_php/api/"
            };
        },
        props: ['content'],
        watch:{
            'content':function (n) {
                editor.txt.html(n);
            }
        },
        mounted() {
            editor = new E(this.$refs.editor);
            editor.config.menus = [
                'bold', // 粗体
                'fontSize', // 字号
                'fontName', // 字体
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                // 'foreColor', // 文字颜色
                'link', // 插入链接
                'list', // 列表
                'justify', // 对齐方式
                'quote', // 引用
                'image', // 插入图片
                'location', // 位置
            ];
            editor.config.onchange = html => {
                this.$emit('input', html);
            };
            editor.config.uploadImgServer = php_url + this.unifiedUrl + 'upload.php';
            editor.config.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 10M
            editor.config.uploadFileName = 'file'; //后端接受上传文件的参数名
            editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 1 张图片
            editor.config.showLinkImg = false; //隐藏网络图片上传
            editor.config.uploadImgHooks = {
                fail: (xhr, editor, result) => {
                    // 插入图片失败回调
                    console.log(result);
                },
                success: (xhr, editor, result) => {
                    // 图片上传成功回调
                    console.log(result);
                },
                timeout: (xhr, editor) => {
                    // 网络超时的回调
                    console.log(xhr, editor);
                    console.log('网络超时');
                },
                error: (xhr, editor) => {
                    // 图片上传错误的回调
                    console.log(xhr, editor);
                    console.log('上传错误');
                },
                //回显
                customInsert: (insertImg, result) => {
                    let url = php_url + result.full_url
                    insertImg(url);
                },
            };
            editor.create();
        },
    };
</script>

<style>
    .w-e-tooltip {
        background-color: #fff!important;
    }
    /*.w-e-text a {*/
        /*color: cornflowerblue!important;*/
    /*}*/
</style>