当前位置：首页 > VUE

vue 实现富文本

2026-02-17 05:54:38VUE

Vue 实现富文本的方法

在 Vue 中实现富文本功能，可以通过以下几种方式完成，具体选择取决于项目需求和技术栈。

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

推荐使用成熟的第三方富文本编辑器库，这些库通常功能丰富且易于集成。

TinyMCE
TinyMCE 是一个功能强大的富文本编辑器，支持插件扩展和自定义配置。
安装依赖：

npm install @tinymce/tinymce-vue

在组件中使用：

vue 实现富文本

<template>
  <Editor
    v-model="content"
    api-key="your-api-key"
    :init="{
      height: 500,
      plugins: 'lists link image table code',
      toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code'
    }"
  />
</template>

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

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

Quill
Quill 是一个轻量级的富文本编辑器，支持模块化配置。
安装依赖：

npm install vue-quill-editor

在组件中使用：

<template>
  <quill-editor v-model="content" :options="editorOptions" />
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

export default {
  components: { quillEditor },
  data() {
    return {
      content: '',
      editorOptions: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['image', 'link']
          ]
        }
      }
    }
  }
}
</script>

自定义实现富文本编辑器

如果需要更轻量级的解决方案，可以通过 contenteditable 属性实现基础的富文本功能。

vue 实现富文本

<template>
  <div
    ref="editor"
    contenteditable="true"
    @input="handleInput"
    @paste="handlePaste"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    handleInput(e) {
      this.content = e.target.innerHTML
    },
    handlePaste(e) {
      e.preventDefault()
      const text = e.clipboardData.getData('text/plain')
      document.execCommand('insertText', false, text)
    }
  }
}
</script>

集成 Markdown 编辑器

如果项目更倾向于 Markdown 语法，可以使用 Markdown 编辑器库。

Vue-Markdown-Editor
安装依赖：

npm install @kangc/v-md-editor

在组件中使用：

<template>
  <v-md-editor v-model="content" height="500px" />
</template>

<script>
import VMdEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'

export default {
  components: { VMdEditor },
  data() {
    return {
      content: ''
    }
  }
}
</script>