vue 如何实现富文本

富文本实现方式

在Vue中实现富文本编辑，通常可以通过以下几种方式完成：

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

• 推荐使用vue-quill、tinymce-vue或wangEditor等专门为Vue设计的富文本编辑器组件
• 这些库提供开箱即用的功能，包括文本格式化、图片上传、表格插入等

集成第三方富文本编辑器

• 将CKEditor、TinyMCE或Froala等流行编辑器集成到Vue项目中
• 需要安装对应编辑器的Vue版本或通过iframe方式嵌入

自定义富文本组件

• 基于contenteditable属性创建自定义组件
• 使用document.execCommand实现基本文本格式操作
• 这种方式灵活性高但开发成本较大

vue-quill 实现示例

安装依赖：

npm install vue-quill quill

组件使用：

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

<script>
import { quillEditor } from 'vue-quill'
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>

TinyMCE 集成示例

安装依赖：

npm install @tinymce/tinymce-vue

组件实现：

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

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

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

自定义富文本组件要点

创建基础结构：

<template>
  <div 
    ref="editor"
    contenteditable="true"
    @input="handleInput"
    @blur="updateContent"
  ></div>
</template>

实现格式化方法：

methods: {
  formatText(command, value = null) {
    document.execCommand(command, false, value)
    this.$refs.editor.focus()
  },
  handleInput() {
    this.content = this.$refs.editor.innerHTML
  }
}

添加样式控制：

[contenteditable] {
  min-height: 200px;
  border: 1px solid #ddd;
  padding: 10px;
  outline: none;
}

图片上传处理

对于需要图片上传功能的实现：

methods: {
  handleImageUpload(file) {
    const formData = new FormData()
    formData.append('image', file)

    axios.post('/upload', formData).then(res => {
      const url = res.data.url
      this.formatText('insertImage', url)
    })
  }
}

内容安全性考虑

处理XSS防护：

import DOMPurify from 'dompurify'

methods: {
  sanitizeContent(html) {
    return DOMPurify.sanitize(html)
  }
}

性能优化建议

• 对大量内容使用懒加载或分块渲染
• 避免频繁的DOM操作
• 使用防抖处理自动保存功能
• 考虑使用虚拟滚动处理超长文档

移动端适配方案

• 使用响应式工具栏
• 调整字体大小和按钮间距
• 处理移动端虚拟键盘弹出事件
• 提供全屏编辑模式选项