vue实现编辑器

Vue 实现编辑器的方案

Vue 可以实现多种类型的编辑器，包括富文本编辑器、代码编辑器等。以下是几种常见的实现方式：

使用现成的 Vue 编辑器组件

1. Tiptap

   • 基于 ProseMirror 的 Vue 富文本编辑器

   • 支持 Markdown、协作编辑等功能

   • 安装方式：

     npm install @tiptap/vue-2 @tiptap/starter-kit

   • 示例代码：

     <template>
       <editor-content :editor="editor" />
     </template>
     
     <script>
     import { Editor, EditorContent } from '@tiptap/vue-2'
     import StarterKit from '@tiptap/starter-kit'
     
     export default {
       components: {
         EditorContent,
       },
       data() {
         return {
           editor: null,
         }
       },
       mounted() {
         this.editor = new Editor({
           content: '<p>Hello World!</p>',
           extensions: [
             StarterKit,
           ],
         })
       },
     }
     </script>

2. Quill

   • 流行的富文本编辑器

   • 通过 vue-quill 包装器在 Vue 中使用

   • 安装：

     npm install vue-quill-editor

   • 示例：

     <template>
       <quill-editor v-model="content" />
     </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: '',
         }
       }
     }
     </script>

实现代码编辑器

1. Monaco Editor

   • VS Code 使用的编辑器

   • 通过 monaco-editor-vue 使用

   • 安装：

     npm install monaco-editor monaco-editor-vue3

   • 示例：

     <template>
       <MonacoEditor
         v-model="code"
         language="javascript"
       />
     </template>
     
     <script>
     import MonacoEditor from 'monaco-editor-vue3'
     
     export default {
       components: { MonacoEditor },
       data() {
         return {
           code: 'console.log("Hello")',
         }
       }
     }
     </script>

2. CodeMirror

   • 轻量级代码编辑器

   • 安装：

     npm install codemirror vue-codemirror

   • 示例：

     <template>
       <codemirror
         v-model="code"
         :options="cmOptions"
       />
     </template>
     
     <script>
     import { codemirror } from 'vue-codemirror'
     import 'codemirror/lib/codemirror.css'
     
     export default {
       components: { codemirror },
       data() {
         return {
           code: 'const a = 1',
           cmOptions: {
             tabSize: 2,
             mode: 'text/javascript',
             lineNumbers: true,
           }
         }
       }
     }
     </script>

自定义简单编辑器

如果需要实现简单的文本编辑器，可以使用 contenteditable 属性：

<template>
  <div
    contenteditable
    @input="updateContent"
    v-html="content"
  />
</template>

<script>
export default {
  data() {
    return {
      content: 'Edit me',
    }
  },
  methods: {
    updateContent(e) {
      this.content = e.target.innerHTML
    }
  }
}
</script>

编辑器功能扩展

1. 添加工具栏

   • 为编辑器创建按钮组件
   • 通过调用编辑器API实现格式修改

2. 保存内容

   • 监听编辑器变化
   • 使用防抖函数减少保存频率
   • 发送内容到后端或本地存储

3. 图片上传

   

   • 拦截粘贴或拖放事件
   • 上传图片到服务器
   • 插入图片URL到编辑器

选择编辑器方案时，应考虑项目需求、功能复杂度和性能要求。现成组件通常能快速实现功能，而自定义方案则更适合特定需求。