vue3+wangeditor的使用

在vue3中使用wangeditor

官网：wangEditor

下载插件

npm install @wangeditor/editor --save

在vue3中的使用

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { reactive,onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar} from '@wangeditor/editor-for-vue'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
let valueHtml = ref('<p>hello</p>')

// 配置
const toolbarConfig = {}
const editorConfig = {
  MENU_CONF:{},
  placeholer: '请输入内容...'
};
// 上传图片配置
editorConfig.MENU_CONF['uploadImage'] = {
  fieldName: 'img',  //文件名
  server:'http://localhost:2000/api/uploadsImg',  //上传的API
  base64LimitSize: 5 * 1024, // 5kb
  // meta: {},   //自定义上传参数
  customInsert:(res: any, insertFn:InsertFnType) => {  // TS 语法
    // customInsert(res, insertFn) {                  // JS 语法
    // res 即服务端的返回结果
    // 从 res 中找到 url alt href ，然后插入图片
    insertFn(res.data.filepath, res.data.originalFilename, res.data.filepath)
  },
}
// 上传视频配置
editorConfig.MENU_CONF['uploadVideo'] = {
  fieldName: 'video',
  maxFileSize: 5 * 1024 * 1024, // 5M
  server:'http://localhost:2000/api/uploadsVideo',
  customInsert(res: any, insertFn: InsertFnType) {  // TS 语法
    // customInsert(res, insertFn) {                  // JS 语法
    // res 即服务端的返回结果
    // 从 res 中找到 url poster ，然后插入视频
    insertFn(res.data.filepath, res.data.filepath)
  },
}
let mode = reactive({});


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

// 记录实例
const handleCreated = (editor:any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

// 导出值
defineExpose({
  valueHtml
})

</script>

<style scoped>

</style>