vue3封装wangeditor富文本组件

最新推荐文章于 2025-04-03 15:26:44 发布

张可爱呀--

最新推荐文章于 2025-04-03 15:26:44 发布

阅读量911

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/m0_60207396/article/details/125302067

版权

本文介绍了如何在Vue 3应用中使用Wangeditor编辑器，包括引入步骤、组件化实现和父子组件间的通信。详细讲解了子组件的配置和生命周期管理，以及父组件的简单调用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先引入wangeditor

yarn add @wangeditor/editor-for-vue@next

子组件

<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 { onBeforeUnmount, computed, shallowRef, ref } from 'vue'

// interface EmitEvent {
//   (e: 'update:modelValue', params: string): void
// }
const props = defineProps({
  height:{
    type:Number,
    default:320
  },
  modelValue:{
    type:String,
    default:''
  },
})
const emit = defineEmits()
const valueHtml = computed({
  get() {
    return props.modelValue
  },
  set(value: string) {
    console.log("value",value)
//子组件传值给父组件
    emit('update:modelValue', value)
  }
})

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const toolbarConfig = {}
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {},
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const { value } = editorRef
  if (value === null) return
  value.destroy()
})
const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
</script>
<style lang="scss" scoped></style>

父组件

<Editor v-model="form.noticeContent"></Editor>

参考文章：vue3中二次封装wangEditor富文本编辑器_zhfy啊的博客-优快云博客_vue3 富文本编辑器