SoFunction
Updated on 2025-04-14

Vue3's Practical Guide to Integrating WangEditor Rich Text Editor

1. Why choose WangEditor

As a popular open source rich text editor in China, WangEditor has the following advantages:

  • Lightweight and efficient: only 1.5MB after compression, far smaller than other similar products
  • Out of the box: Provide official Vue/React package components
  • Strong scalability: supports custom menus, asynchronous image uploads, etc.
  • Safe and reliable: built-in XSS filtering mechanism

2. Quickly integrate into Vue projects

1. Installation dependencies

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

2. Basic component packaging

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

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

// Editor instance (must use shallowRef)const editorRef = shallowRef()

// Content data bindingconst valueHtml = ref('<p>Initial content</p>')
&lt;/script&gt;

Implementation of core functions

1. Picture upload integration

editorConfig.MENU_CONF['uploadImage'] = {
  allowedFileTypes: ['image/*'],
  customUpload: async (file, insertFn) =&gt; {
    try {
      const ossUrl = await uploadToOSS(file) // Connect to cloud storage      insertFn(ossUrl, 'Picture description') // Insert the editor    } catch (error) {
      ('Upload failed:', error)
    }
  }
}

Note: It is recommended to combine Qiniu Cloud/Ali Cloud OSS to implement file storage

2. Two-way data binding

// Parent component passes valuewatch(() =&gt; , (newVal) =&gt; {
  if ( !== newVal) {
     = newVal
  }
})

// Subcomponent updatewatch(valueHtml, (newVal) =&gt; {
  emit('update:modelValue', newVal)
})

3. Toolbar customization

// Hide infrequently used functionsconst toolbarConfig = {
  excludeKeys: [
    'fullScreen', 
    'codeBlock', 
    'code'
  ]
}

4. Advanced practical skills

1. Dynamically get toolbar configuration

onMounted(() => {
  setTimeout(() => {
    const editor = 
    const toolbar = (editor)
    (().toolbarKeys)
  }, 1500)
})

2. Memory leak protection

onBeforeUnmount(() =&gt; {
  const editor = 
  editor?.destroy() // The instance must be destroyed})

3. Content changes monitoring

const handleCreated = (editor) =&gt; {
   = editor
  
  // Listen to editor changes  ('change', () =&gt; {
    ('Content changes:', ())
  })
}

5. Best Practice Suggestions

Style isolation: Limit editor width through outer containers

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

Performance optimization:

  • Use shallowRef to store editor instances
  • Avoid frequent operation of DOM

Security Policy:

Enable XSS filtering

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

Use components:

<RichTextEditor v-model="content" />

6. Summary

Through the practice of this article, we have achieved:

✅ Complete editor integration

✅ Cloud pictures upload

✅ Data bidirectional binding

✅ Toolbar customization

✅ Memory security protection

Preview function：Vue3 implements HTML content preview function

Official Resources：

  • WangEditor official website
  • GitHub repository

This is the article about this practical guide for Vue3 integrating WangEditor rich text editor. For more related content related to Vue3 integrating WangEditor rich text, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!