当前位置：首页 > VUE

vue实现富文本

2026-01-18 17:21:22VUE

Vue 实现富文本编辑器的方法

使用现成的富文本编辑器库

Vue 生态中有多个成熟的富文本编辑器库可供选择，以下是几个常用的选项：

Quill

安装依赖：
```
npm install quill @vueup/vue-quill
```

基本用法：

<template>
  <QuillEditor v-model:content="content" contentType="html" />
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

export default {
  components: { QuillEditor },
  data() {
    return {
      content: '<h1>Hello World!</h1>'
    }
  }
}
</script>

TinyMCE

安装依赖：
```
npm install @tinymce/tinymce-vue
```
需要注册 TinyMCE 账号获取 API key

基本用法：

<template>
  <Editor
    api-key="your-api-key"
    v-model="content"
    :init="{
      height: 500,
      plugins: 'lists link image table code help wordcount'
    }"
  />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  components: { Editor },
  data() {
    return {
      content: 'Welcome to TinyMCE!'
    }
  }
}
</script>

CKEditor

安装依赖：

npm install @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

基本用法：

<template>
  <CKEditor :editor="editor" v-model="content" />
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

export default {
  components: { CKEditor: CKEditor.component },
  data() {
    return {
      editor: ClassicEditor,
      content: '<p>CKEditor content</p>'
    }
  }
}
</script>

自定义实现简单富文本

如果需要轻量级的解决方案，可以使用浏览器原生的 contenteditable 属性：

<template>
  <div
    contenteditable
    @input="handleInput"
    v-html="content"
    class="rich-text-editor"
  ></div>
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    content: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  methods: {
    handleInput(e) {
      this.content = e.target.innerHTML
    }
  }
}
</script>

<style>
.rich-text-editor {
  min-height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

实现工具栏功能

对于自定义编辑器，可以添加工具栏来控制文本样式：

<template>
  <div class="editor-container">
    <div class="toolbar">
      <button @click="formatText('bold')">B</button>
      <button @click="formatText('italic')">I</button>
      <button @click="formatText('underline')">U</button>
      <select v-model="heading" @change="formatHeading">
        <option value="">Normal</option>
        <option value="h1">Heading 1</option>
        <option value="h2">Heading 2</option>
      </select>
    </div>
    <div
      ref="editor"
      contenteditable
      @input="updateContent"
      class="editor-content"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      heading: '',
      content: ''
    }
  },
  methods: {
    formatText(command) {
      document.execCommand(command, false, null)
      this.$refs.editor.focus()
    },
    formatHeading() {
      document.execCommand('formatBlock', false, this.heading || 'p')
      this.$refs.editor.focus()
    },
    updateContent() {
      this.content = this.$refs.editor.innerHTML
    }
  }
}
</script>

注意事项

XSS 防护：富文本内容可能包含恶意代码，在显示用户输入内容时务必进行过滤。可以使用 DOMPurify 等库：
```
npm install dompurify
```
使用示例：
```
import DOMPurify from 'dompurify'
const cleanHtml = DOMPurify.sanitize(dirtyHtml)
```
图片上传：大多数富文本编辑器需要配置图片上传功能，通常需要后端接口支持。
移动端兼容性：不同编辑器在移动设备上的表现可能不一致，需要进行充分测试。
性能考虑：复杂的富文本编辑器可能影响页面性能，特别是在处理大量内容时。