前端插件扩展（二）

wangEditor

wangEditor 是优秀的国产富文本编辑器，下面我们来掌握在项目中集成上这款编辑器。

下面实现开发wangEditor的vue组件，首先安装扩展包

npm installwangeditor

组件代码

然后创建 form-wang-editor.vue组件文件

<template>
    <div :id="id"></div>
</template>

<script setup>
import E from "wangeditor"
import { ref, defineProps, nextTick, defineEmit } from 'vue'

const props = defineProps({
    id: { type: String, default: 'editor' },
    action: { type: String, default: `http://houdunren.test/api/upload` },
    modelValue: { type: String },
})

const emit = defineEmit(['update:modelValue'])

nextTick(() => {
    const editor = new E(`#${props.id}`)
    //后台上传地址
    editor.config.uploadImgServer = props.action
    //允许文件大小
    editor.config