vue实现富文本

Vue 实现富文本的方法

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

Vue 生态中有多个成熟的富文本编辑器库可供选择，这些库通常提供了丰富的功能和易于集成的 API。以下是几个常用的库：

1. Quill.js
   Quill.js 是一个轻量级的富文本编辑器，支持自定义模块和主题。可以通过 vue-quill-editor 封装库在 Vue 项目中快速集成。
   安装命令：

   npm install vue-quill-editor quill

   示例代码：

   <template>
     <quill-editor v-model="content" />
   </template>
   <script>
   import { quillEditor } from 'vue-quill-editor'
   export default {
     components: { quillEditor },
     data() {
       return { content: '' }
     }
   }
   </script>

2. TinyMCE
   TinyMCE 是一个功能强大的商业级富文本编辑器，支持插件扩展。可以通过 @tinymce/tinymce-vue 封装库集成。
   安装命令：

   npm install @tinymce/tinymce-vue tinymce

   示例代码：

   <template>
     <editor v-model="content" api-key="YOUR_API_KEY" />
   </template>
   <script>
   import Editor from '@tinymce/tinymce-vue'
   export default {
     components: { Editor },
     data() {
       return { content: '' }
     }
   }
   </script>

3. CKEditor
   CKEditor 提供了 Vue 封装版本，支持从基础到高级的多种配置。
   安装命令：

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

   示例代码：

   <template>
     <ckeditor v-model="content" :editor="editor" />
   </template>
   <script>
   import CKEditor from '@ckeditor/ckeditor5-vue'
   import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
   export default {
     components: { ckeditor: CKEditor.component },
     data() {
       return { content: '', editor: ClassicEditor }
     }
   }
   </script>

自定义实现富文本编辑器

如果需要更轻量或高度自定义的富文本功能，可以通过原生 HTML 的 contenteditable 属性结合 Vue 实现。

示例代码：

<template>
  <div 
    contenteditable="true" 
    @input="updateContent"
    v-html="content"
  ></div>
</template>
<script>
export default {
  data() {
    return { content: '' }
  },
  methods: {
    updateContent(e) {
      this.content = e.target.innerHTML
    }
  }
}
</script>

处理富文本内容的安全性

富文本内容可能包含 HTML 标签，直接渲染可能导致 XSS 攻击。可以使用 DOMPurify 对内容进行净化。
安装命令：

npm install dompurify

示例代码：

<template>
  <div v-html="safeContent"></div>
</template>
<script>
import DOMPurify from 'dompurify'
export default {
  data() {
    return { rawContent: '<p>User input</p>' }
  },
  computed: {
    safeContent() {
      return DOMPurify.sanitize(this.rawContent)
    }
  }
}
</script>

集成图片上传功能

富文本编辑器通常需要支持图片上传。可以通过监听编辑器的事件，调用自定义上传逻辑。
以 Quill.js 为例：

<template>
  <quill-editor 
    v-model="content" 
    :options="editorOptions" 
    @editor-change="handleImageUpload"
  />
</template>
<script>
export default {
  data() {
    return {
      content: '',
      editorOptions: {
        modules: { toolbar: [{ 'image': true }] }
      }
    }
  },
  methods: {
    handleImageUpload() {
      // 实现图片上传逻辑
    }
  }
}
</script>

以上方法可以根据项目需求选择适合的富文本实现方式。现成的库适合快速集成，而自定义实现则更适合轻量级或特定功能需求。