vue3使用富文本编辑器wang-editor5

官网：https://www.wangeditor.com/

1.封装成公共组件：

<template>
  <div style="border: 1px solid #ccc; z-index: 100">
    <!-- 工具栏 -->
    <Toolbar 
      :editor="editorRef" 
      :defaultConfig="toolbarConfig"
      :mode="mode" 
      style="border-bottom: 1px solid #ccc"
    />
    <!-- 编辑器 -->
    <Editor
      v-model="newValueHtml"
      :style="style"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue'
import constant from '@/utils/constant'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IDomEditor, IEditorConfig } from '@wangeditor/editor'

const props = defineProps({
  valueHtml: {
    type: String,
    required: true
  },
  mode: {
    type: String,
    default: 'default' // 可选值：[default | simple]
  },
  placeholder: {
    type: String,
    default: ''
  },
  style: {
    type: String,
    default: 'min-height: 300px;'
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const newValueHtml = ref('')
const globalUrl = (window as any).globalUrl

watch(() => props.valueHtml, () => {
  newValueHtml.value = JSON.parse(JSON.stringify(props.valueHtml))
})

type InsertFnType = (url: string, alt: string, href: string) => void

// 工具栏配置
const toolbarConfig = ref({})
// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
  placeholder: props.placeholder,
  // readOnly: props.disabled,
  MENU_CONF: {
    uploadImage: {
      server: constant.uploadUrl,
      fieldName: 'file',
      // 自定义插入图片
      customInsert(res: any, insertFn: InsertFnType) {
        // res 即服务端的返回结果
        // 从 res 中找到 url alt href ，然后插图图片
        let url = `${globalUrl.url}${res.data.realPath}`
        insertFn(url, res.data.filename, '')
      }
    }
  }
}

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

const handleCreated = (editor: any) => {
  editorRef.value = editor
}

// 获取富文本内容
const getValueHtml = () => {
  return editorRef.value.getHtml()
}

defineExpose({
  getValueHtml
})
</script>

2.在组件内调用：

<WangEditor ref="wangEditorRef" :valueHtml="dataForm.productContent" placeholder="请输入产品内容"></WangEditor>

<script lang="ts" setup>
import WangEditor from '@/components/wang-editor/index.vue'
const wangEditorRef = ref() // 富文本编辑器ref
dataForm.productContent = wangEditorRef.value.getValueHtml()
</script>

最后

以上就是能干毛巾为你收集整理的vue3使用富文本编辑器wang-editor5的全部内容，希望文章能够帮你解决vue3使用富文本编辑器wang-editor5所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。