在vue2中使用wangeditor

<template>
    <div class="dm_box">
        <div class="dm_main">
            <div ref="editorElem" class="eidtor" style="text-align: left"></div>
        </div>
    </div>
</template>
   
<script>
import wangeditor from "wangeditor";
import AlertMenu from "@/utils/alertMenu";
import store from '@/store/index'
import { ElElMessage } from 'element-plus';
import { cookieSet, cookieGet } from "@/utils/cookie"
export default {
    props: ['type', 'detail'],
    data() {
        return {
            ruleForm: {},
            edihtml:'',
            title: "",
            wangeditorLoading: Boolean,
            editor: null,
            editorContent: "",
        };
    },
    created() {
    },
    watch:{
        detail(val){
            console.log(val);
            this.edihtml = val;
        }
    },
    methods: {
    },
    mounted() {
        console.log(this.type);
        console.log(this.detail);
        this.editorContent = new wangeditor(this.$refs.editorElem);
        this.editorContent.menus.extend('alertMenu', AlertMenu) //配置扩展菜单
        this.editorContent.config.menus = this.editorContent.config.menus.concat('alertMenu')
        this.editorContent.config.showFullScreen = false;
        this.editorContent.config.showLinkImg = false  //   禁止上传网络图片
        this.editorContent.config.uploadImgServer = process.env.VUE_APP_SERVE + "/api/file/add_file";
        this.editorContent.config.uploadParams = {
            user_id:this.$store.state.userInfo.id//用户id
        }
        this.editorContent.config.uploadFileName = 'file' // 后端接受上传文件的参数名
        this.editorContent.config.uploadImgHeaders = {'token': "Bearer " + cookieGet("token") };
        this.editorContent.config.uploadImgHooks = {
            before: function (xhr, editor, files) {
                if (files.length != 0) {
                    this.wangeditorLoading = true
                }
            },
            success: function (xhr, editor, result) {
                console.log(result);
                console.log('success')
            },
            fail: function (xhr, editor, result) {
                console.log('fail')
            },
            error: function (xhr, editor) {
                console.log('error')
            },
            timeout: function (xhr, editor) {
                console.log('timeout')
            },
            customInsert: function (insertImg, result, editor) {
                this.wangeditorLoading = false
                console.log('customInsert上传了图片：', result.data.file_url);
                insertImg(result.data.file_url);
            }
        };
        this.editorContent.config.onchange = (html) => {
            console.log(html);
            this.edihtml = html;
            this.$emit("change",this.edihtml); // 将内容同步到父组件中
        };
        this.editorContent.create();
        this.editorContent.txt.html(this.detail);
        console.log(store.state.userInfo);
        // $(".w-e-text-container").css("height", "600px");
    },
};
</script>
   
<style scoped>
</style>

添加源码工具

import E from 'wangeditor'
const { BtnMenu } = E
let _this = this
export default class AlertMenu extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu">
        <i class="nb-html" style="font-size:12px;width24px">源码</i>
      </div>`
        )
        super($elem, editor)
    }
    clickHandler() {
        this.showSource()
        this.tryChangeActive()
    }
    tryChangeActive() {
        // if (_this.isHTML) this.active()
        // else this.unActive()
        this.unActive()
    }
    showSource() {
        let _this = this
        let _editor = _this.editor
        _this.isHTML = !_this.isHTML
        let _source = _editor.txt.html()
        if (_this.isHTML) {
            _source = _source.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;")
        } else {
            _source = _editor.txt.text().replace(/&lt;/ig, "<").replace(/&gt;/ig, ">").replace(/&nbsp;/ig, " ")
        }
        _editor.txt.html(_source)
    }
}