一、实验背景与目标

在Web开发中，富文本编辑器是内容管理系统（CMS）、博客平台和在线协作工具的核心组件。传统富文本编辑器（如TinyMCE、CKEditor）功能全面但扩展性有限，难以满足用户对个性化工具栏、自定义样式和动态交互的需求。本实验基于Vue 3的组合式API，探索如何构建一个可扩展的富文本编辑器框架，重点解决以下问题：

1. 动态工具栏配置：允许用户通过JSON或可视化界面自定义工具按钮（如加粗、插入图片等）。
2. 样式隔离与扩展：支持主题切换和CSS变量注入，避免全局样式污染。
3. 插件化架构：通过插槽（Slot）和自定义指令实现功能模块的热插拔。
4. 数据安全与性能：优化DOM操作频率，防止XSS攻击。

二、核心实现原理

1. 基于ContentEditable的DOM操作

富文本编辑的核心是操作contenteditable="true"的DOM元素。Vue通过ref获取编辑器实例，结合MutationObserver监听内容变化：

import { ref, onMounted, onBeforeUnmount } from 'vue';
export default {
  setup() {
    const editorRef = ref(null);
    let observer = null;
    onMounted(() => {
      if (editorRef.value) {
        observer = new MutationObserver((mutations) => {
          console.log('内容变化:', mutations);
        });
        observer.observe(editorRef.value, {
          childList: true,
          subtree: true,
          characterData: true
        });
      }
    });
    onBeforeUnmount(() => {
      if (observer) observer.disconnect();
    });
    return { editorRef };
  }
};

关键点：MutationObserver比轮询检查更高效，但需注意过滤无关变更（如光标移动）。

2. 工具栏动态渲染

工具栏按钮通过配置数组动态生成，支持图标、快捷键和事件绑定：

const toolbarConfig = ref([
  {
    icon: 'bold',
    action: 'bold',
    title: '加粗',
    shortcut: 'Ctrl+B'
  },
  {
    icon: 'image',
    action: 'insertImage',
    title: '插入图片'
  }
]);
const executeCommand = (command) => {
  document.execCommand(command, false, null);
  // Vue 3推荐使用更现代的Selection API替代execCommand
};

优化建议：使用@vueuse/core中的useEventListener监听快捷键，避免全局事件监听。

三、组件设计与实现

1. 编辑器主组件结构

<template>
  <div class="rich-text-editor">
    <Toolbar :items="toolbarConfig" @command="handleCommand" />
    <div 
      ref="editorRef" 
      class="editor-content" 
      contenteditable 
      @input="onInput"
    ></div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import Toolbar from './Toolbar.vue';
const editorRef = ref(null);
const toolbarConfig = ref([...]); // 同上
const handleCommand = (command) => {
  // 处理工具栏命令
};
const onInput = (e) => {
  // 实时保存或格式化内容
};
</script>
<style scoped>
.rich-text-editor {
  border: 1px solid #ddd;
  border-radius: 4px;
}
.editor-content {
  min-height: 200px;
  padding: 10px;
  outline: none;
}
</style>

2. 插件化架构设计

通过插槽实现扩展点，例如支持自定义图片上传组件：

<!-- Editor.vue -->
<template>
  <Toolbar ... />
  <div class="editor-content" contenteditable>
    <slot name="image-uploader" :onUpload="handleImageUpload">
      <!-- 默认上传组件 -->
      <DefaultImageUploader @upload="handleImageUpload" />
    </slot>
  </div>
</template>

用户可替换插槽内容：

<CustomEditor>
  <template #image-uploader="{ onUpload }">
    <MyCustomUploader @upload="onUpload" />
  </template>
</CustomEditor>

四、高级功能实现

1. 自定义样式与主题

使用CSS变量实现主题切换：

/* 默认主题 */
.rich-text-editor {
  --toolbar-bg: #f5f5f5;
  --editor-bg: white;
}
/* 暗黑主题 */
.rich-text-editor.dark {
  --toolbar-bg: #333;
  --editor-bg: #222;
  color: white;
}

在Vue中动态切换：

const isDarkMode = ref(false);
const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value;
};

2. 防XSS攻击处理

使用DOMPurify净化HTML内容：

import DOMPurify from 'dompurify';
const sanitizeHtml = (html) => {
  return DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['p', 'b', 'i', 'u', 'a', 'img'],
    ALLOWED_ATTR: ['href', 'src', 'target']
  });
};

五、实验总结与优化方向

1. 当前成果

• 实现了基础富文本编辑功能。
• 支持动态工具栏配置和插件扩展。
• 完成了主题切换和XSS防护。

2. 待优化问题

1. 性能优化：大数据量时DOM操作卡顿，需引入虚拟滚动。
2. 协作编辑：集成WebSocket实现多人实时编辑。
3. 移动端适配：优化触摸事件和手势支持。

3. 推荐学习资源

• Vue官方文档：组合式API、Teleport组件。
• MDN：ContentEditable规范、Selection API。
• 开源项目：Tiptap（基于ProseMirror的Vue实现）。

六、完整代码示例

[GitHub仓库链接]（示例中可替换为实际链接）提供了完整实现，包含：

• 可配置的工具栏系统。
• 插件化架构示例。
• 主题切换和样式隔离。
• 单元测试用例（使用Vitest）。

通过本实验，开发者可快速搭建一个符合业务需求的富文本编辑器，并根据实际场景扩展功能模块。