vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3整合WangEditor富文本

Vue3整合WangEditor富文本编辑器的实践指南

作者：茶颜悅色

这篇文章主要为大家详细介绍了如何在 Vue 3 项目中集成 WangEditor 富文本编辑器,实现图文混排、自定义扩展等高阶功能,感兴趣的小伙伴可以了解下

一、为什么选择 WangEditor

作为国内流行的开源富文本编辑器，WangEditor 具有以下优势：

二、快速集成到 Vue 项目

1. 安装依赖

npm install @wangeditor/editor @wangeditor/editor-for-vue

2. 基础组件封装

<template>
  <div class="editor-wrapper">
    <!-- 工具栏 -->
    <Toolbar 
      :editor="editorRef" 
      :defaultConfig="toolbarConfig"
    />
    
    <!-- 编辑器 -->
    <Editor
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 编辑器实例（必须使用 shallowRef）
const editorRef = shallowRef()

// 内容数据绑定
const valueHtml = ref('<p>初始内容</p>')
</script>

三、核心功能实现

1. 图片上传集成

editorConfig.MENU_CONF['uploadImage'] = {
  allowedFileTypes: ['image/*'],
  customUpload: async (file, insertFn) => {
    try {
      const ossUrl = await uploadToOSS(file) // 对接云存储
      insertFn(ossUrl, '图片描述') // 插入编辑器
    } catch (error) {
      console.error('上传失败:', error)
    }
  }
}

注：推荐结合七牛云/阿里云 OSS 实现文件存储

2. 数据双向绑定

// 父组件传值
watch(() => props.modelValue, (newVal) => {
  if (valueHtml.value !== newVal) {
    valueHtml.value = newVal
  }
})

// 子组件更新
watch(valueHtml, (newVal) => {
  emit('update:modelValue', newVal)
})

3. 工具栏定制

// 隐藏不常用功能
const toolbarConfig = {
  excludeKeys: [
    'fullScreen', 
    'codeBlock', 
    'code'
  ]
}

四、高级实践技巧

1. 动态获取工具栏配置

onMounted(() => {
  setTimeout(() => {
    const editor = editorRef.value
    const toolbar = DomEditor.getToolbar(editor)
    console.log(toolbar.getConfig().toolbarKeys)
  }, 1500)
})

2. 内存泄漏防护

onBeforeUnmount(() => {
  const editor = editorRef.value
  editor?.destroy() // 必须销毁实例
})

3. 内容变化监听

const handleCreated = (editor) => {
  editorRef.value = editor
  
  // 监听编辑器变化
  editor.on('change', () => {
    console.log('内容变化:', editor.getHtml())
  })
}

五、最佳实践建议

样式隔离：通过外层容器限制编辑器宽度

.editor-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid #eee;
}

性能优化：

安全策略：

启用 XSS 过滤

editorConfig = {
  MENU_CONF: {
    uploadImage: {
      customAlert: (s) => { 
        alert(s) 
      }
    }
  }
}

使用组件：

<RichTextEditor v-model="content" />

六、总结

通过本文的实践，我们已经实现了：

✅ 编辑器的完整集成

✅ 云端图片上传

✅ 数据双向绑定

✅ 工具栏定制

✅ 内存安全防护

预览功能：Vue3实现HTML内容预览功能

官方资源：

到此这篇关于Vue3整合WangEditor富文本编辑器的实践指南的文章就介绍到这了,更多相关Vue3整合WangEditor富文本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文