老王富文本二次封装

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

组件

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor :style="{ height: height + 'px', 'overflow-y': 'hidden' }" v-model="valueHtml" :defaultConfig="editorConfig"
      :mode="mode" @onCreated="handleCreated" />
  </div>
</template>
<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { computed, onBeforeUnmount, shallowRef } from 'vue';
import { IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { MessagePlugin } from 'tdesign-vue-next';
import { reqFile } from '@/api/base';
interface Props {
  modelValue: string
  height?: number | string // 编辑器的高度
}
interface EmitEvent {
  (e: 'update:modelValue', params: string): void
}
const props = withDefaults(defineProps<Props>(), {
  height: 300
})
const emit = defineEmits<EmitEvent>()
const valueHtml = computed({
  get() {
    return props.modelValue
  },
  set(value: string) {
    emit('update:modelValue', value)
  }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const mode = 'simple'
const toolbarConfig: Partial<IToolbarConfig> = {}
toolbarConfig.excludeKeys = [
  "fullScreen",
  "group-video",
  "insertImage"
]
const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} }
editorConfig.MENU_CONF['uploadImage'] = {
  async customUpload(file: File, insertFn: any) {
    var fd = new FormData();
    fd.append("file", file);
    const res = await reqFile(fd)
    if (res) {
      insertFn(res)
    } else {
      MessagePlugin.error("上传失败")
    }
  }
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const { value } = editorRef
  if (value === null) return
  value.destroy()
})
const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
</script>
<style lang="scss" scoped></style>

使用

<WangEdit :height="700" v-model="formData.question"></WangEdit>