vue 实现富文本

富文本编辑器实现方式

在Vue中实现富文本编辑器有多种方案，以下是几种主流方法：

使用现成的富文本库

1. Quill

   • 安装依赖：

     npm install quill vue-quill-editor

   • 基本使用：

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

2. TinyMCE

   • 安装依赖：

     npm install @tinymce/tinymce-vue

   • 示例代码：

     <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

   

   • 安装依赖：

     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: ''
         }
       }
     }
     </script>

自定义实现方案

1. contenteditable方案

   • 基础实现：

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

2. 结合execCommand

   • 添加工具栏按钮：

     <template>
       <div>
         <button @click="formatText('bold')">加粗</button>
         <div contenteditable ref="editor"></div>
       </div>
     </template>
     <script>
     export default {
       methods: {
         formatText(command) {
           document.execCommand(command, false, null)
         }
       }
     }
     </script>

功能扩展建议

1. 图片上传处理

   

   • 为编辑器添加图片上传功能需要拦截默认行为并实现自定义上传逻辑

2. 自定义插件开发

   • 主流编辑器都支持插件扩展，可根据需求开发特定功能插件

3. 内容安全处理

   • 对输出的HTML内容进行XSS过滤，推荐使用DOMPurify等库

4. Markdown支持

   • 部分编辑器支持Markdown语法，或可通过插件实现

选择方案时应考虑项目需求、编辑器功能、性能影响等因素。现成库通常更成熟但可能体积较大，自定义方案更灵活但开发成本较高。