npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue2-child/docs/superpowers/plans/2026-05-29-quill-editor.md

@@ -0,0 +1,836 @@
+# QuillEditor组件封装 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- []`) syntax for tracking.
+
+**Goal:** 在 `src/views/element/quillEditor/`目录下封装一个 Quill2.x 富文本编辑器组件(全量工具栏 +表格 + base64 图片),并在 example.vue演示三实例对比。
+
+**Architecture:** 单文件 Vue2组件 `QuillEditor.vue`,在 `mounted` 中初始化 Quill 实例,通过 props/events/methods 对外暴露能力。工具栏配置集中到 `toolbar.js`,example.vue演示三个实例(基础/只读/禁用)。不污染全局 CSS,所有样式在组件内 import。
+
+**Tech Stack:** Vue2.6 + Element UI2.15 + Quill2.0.2 + quill-table-better1.2.3 + vue-cli5
+
+**Spec:** `docs/superpowers/specs/2026-05-29-quill-editor-design.md`
+
+**Working Directory:** `D:\web\wujie\wujie-wk\wujie-vue2-child`
+
+---
+
+## 文件结构
+
+```
+src/views/element/quillEditor/
+├── index.vue # QuillEditor组件(对外暴露,已存在 tab引用)
+├── example.vue # Demo 页(三实例对比)
+├── toolbar.js # 默认工具栏 + handlers
+└── README.md # 使用文档
+
+package.json # 新增 quill + quill-table-better依赖
+```
+
+**职责划分:**
+- `index.vue`:Vue2组件,管理 Quill生命周期、props/events/methods、v-model同步、图片 base64 处理
+- `toolbar.js`:默认工具栏数组 + image handler(委托给组件内部 file input)+ table-better 配置
+- `example.vue`:三个实例 + v-model演示 +初始内容(含表格)
+- `README.md`:API文档 + 使用示例
+
+---
+
+## Task1: 安装依赖
+
+**Files:**
+- Modify: `package.json`
+
+- [] **Step1.1: 安装 Quill2.x**
+
+Run:
+```bash
+cd "D:\web\wujie\wujie-wk\wujie-vue2-child" && npm install quill@2.0.2 --save
+```
+
+Expected: `package.json` dependencies 中新增 `"quill": "^2.0.2"`,`node_modules/quill`存在
+
+- [] **Step1.2: 安装 quill-table-better**
+
+Run:
+```bash
+cd "D:\web\wujie\wujie-wk\wujie-vue2-child" && npm install quill-table-better@1.2.3 --save
+```
+
+Expected: `package.json` dependencies 中新增 `"quill-table-better": "^1.2.3"`,`node_modules/quill-table-better`存在
+
+- [] **Step1.3:验证安装**
+
+Run:
+```bash
+cd "D:\web\wujie\wujie-wk\wujie-vue2-child" && ls node_modules/quill/dist/quill.snow.css node_modules/quill-table-better/dist/quill-table-better.css node_modules/quill-table-better/dist/quill-table-better.js
+```
+
+Expected:三个文件都存在
+
+- [] **Step1.4: Commit**
+
+```bash
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" add package.json package-lock.json
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" commit -m "deps: add quill@2.0.2 and quill-table-better@1.2.3"
+```
+
+---
+
+## Task2:写 toolbar.js(默认工具栏配置)
+
+**Files:**
+- Create: `src/views/element/quillEditor/toolbar.js`
+
+- [] **Step2.1: 创建 toolbar.js**
+
+Write the following content to `src/views/element/quillEditor/toolbar.js`:
+
+```javascript
+/**
+ * QuillEditor 默认工具栏配置
+ *
+ *暴露:
+ * - defaultToolbar:工具栏按钮数组(传给 Quill 的 modules.toolbar)
+ * - defaultTableBetterConfig:table-better 模块配置
+ * - defaultModules:组装好的 modules 对象(含 toolbar + table-better + keyboard)
+ *
+ * 注意:image handler 在 QuillEditor组件中注册,这里只占位声明,
+ *组件会在 initQuill 时通过 modules.toolbar.handlers.image覆盖。
+ */
+
+export const defaultToolbar = [
+ [{ header: [1,2,3,4,5,6, false] }],
+ [{ font: [] }],
+ [{ size: ['small', false, 'large', 'huge'] }],
+ ['bold', 'italic', 'underline', 'strike'],
+ [{ color: [] }, { background: [] }],
+ [{ script: 'sub' }, { script: 'super' }],
+ ['blockquote', 'code-block'],
+ [{ list: 'ordered' }, { list: 'bullet' }],
+ [{ indent: '-1' }, { indent: '+1' }],
+ [{ align: [] }],
+ ['link', 'image', 'video'],
+ ['table-better'],
+ ['clean'],
+ ['undo', 'redo'],
+];
+
+export const defaultTableBetterConfig = {
+ language: 'zh_CN',
+ menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
+ toolbarTable: true,
+};
+
+export function buildDefaultModules(quillTableBetter) {
+ return {
+ toolbar: defaultToolbar,
+ table: false,
+ 'table-better': defaultTableBetterConfig,
+ keyboard: {
+ bindings: quillTableBetter.keyboardBindings,
+ },
+ };
+}
+```
+
+- [] **Step2.2:验证文件创建**
+
+Run:
+```bash
+ls -la "D:\web\wujie\wujie-wk\wujie-vue2-child\src\views\element\quillEditor\toolbar.js"
+```
+
+Expected: 文件存在,大小约1.5KB
+
+- [] **Step2.3: Commit**
+
+```bash
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" add src/views/element/quillEditor/toolbar.js
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" commit -m "feat(quillEditor): add default toolbar config"
+```
+
+---
+
+## Task3:写 QuillEditor 主组件(index.vue)
+
+**Files:**
+- Create: `src/views/element/quillEditor/index.vue`
+
+- [] **Step3.1: 创建 QuillEditor.vue**
+
+Write the following content to `src/views/element/quillEditor/index.vue`:
+
+```vue
+<template>
+ <div class="quill-editor-wrapper" :class="{ 'is-disabled': disabled }">
+ <div ref="editor" :style="editorStyle"></div>
+ <input
+ ref="fileInput"
+ type="file"
+ accept="image/*"
+ style="display: none"
+ @change="onFileChange"
+ />
+ </div>
+</template>
+
+<script>
+import Quill from 'quill';
+import QuillTableBetter from 'quill-table-better';
+import 'quill/dist/quill.snow.css';
+import 'quill-table-better/dist/quill-table-better.css';
+import { defaultToolbar, buildDefaultModules } from './toolbar.js';
+
+const SIZE_THRESHOLD =5 *1024 *1024; //5MB
+
+export default {
+ name: 'QuillEditor',
+
+ model: {
+ prop: 'value',
+ event: 'input',
+ },
+
+ props: {
+ value: {
+ type: String,
+ default: '',
+ },
+ placeholder: {
+ type: String,
+ default: '请输入内容...',
+ },
+ readonly: {
+ type: Boolean,
+ default: false,
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ height: {
+ type: [String, Number],
+ default:300,
+ },
+ toolbar: {
+ type: [Array, Object],
+ default: null,
+ },
+ imageHandler: {
+ type: Function,
+ default: null,
+ },
+ theme: {
+ type: String,
+ default: 'snow',
+ },
+ },
+
+ data() {
+ return {
+ quill: null,
+ isInternalChange: false,
+ changeTimer: null,
+ };
+ },
+
+ computed: {
+ editorStyle() {
+ const h = typeof this.height === 'number' ? `${this.height}px` : this.height;
+ return { minHeight: h };
+ },
+ },
+
+ watch: {
+ value(newVal) {
+ if (this.isInternalChange) {
+ this.isInternalChange = false;
+ return;
+ }
+ if (this.quill && newVal !== this.getHtml()) {
+ this.setHtml(newVal);
+ }
+ },
+ readonly(val) {
+ if (this.quill) {
+ this.quill.enable(!val);
+ }
+ },
+ disabled(val) {
+ if (this.quill) {
+ this.quill.enable(!val);
+ }
+ },
+ },
+
+ mounted() {
+ this.$nextTick(() => {
+ this.initQuill();
+ });
+ },
+
+ beforeDestroy() {
+ if (this.changeTimer) {
+ clearTimeout(this.changeTimer);
+ this.changeTimer = null;
+ }
+ if (this.quill) {
+ try {
+ this.quill.off('text-change', this.onTextChange);
+ } catch (e) {
+ // ignore
+ }
+ this.quill = null;
+ }
+ },
+
+ methods: {
+ initQuill() {
+ if (typeof Quill === 'undefined' || !Quill) {
+ this.renderError('Quill 未安装,请先执行 npm install quill');
+ return;
+ }
+
+ // 注册 table-better 模块
+ Quill.register(
+ { 'modules/table-better': QuillTableBetter },
+ true
+ );
+
+ const modules = this.buildModules();
+
+ this.quill = new Quill(this.$refs.editor, {
+ theme: this.theme,
+ placeholder: this.placeholder,
+ readOnly: this.readonly || this.disabled,
+ modules,
+ });
+
+ //初始内容
+ if (this.value) {
+ this.setHtml(this.value);
+ }
+
+ //监听内容变化
+ this.quill.on('text-change', this.onTextChange);
+
+ //焦点事件
+ this.quill.on('selection-change', this.onSelectionChange);
+
+ this.$emit('ready', this.quill);
+ },
+
+ buildModules() {
+ const baseModules = buildDefaultModules(QuillTableBetter);
+ const toolbarConfig = this.toolbar || defaultToolbar;
+
+ //复制 toolbar 配置,添加 image handler
+ const modules = {
+ ...baseModules,
+ toolbar: Array.isArray(toolbarConfig)
+ ? { container: toolbarConfig, handlers: { image: this.handleImage } }
+ : { ...toolbarConfig, handlers: { image: this.handleImage, ...(toolbarConfig.handlers || {}) } },
+ };
+
+ return modules;
+ },
+
+ onTextChange(delta, oldDelta, source) {
+ if (source === Quill.sources.SILENT) return;
+ const html = this.getHtml();
+ this.isInternalChange = true;
+ this.$emit('input', html);
+
+ if (this.changeTimer) clearTimeout(this.changeTimer);
+ this.changeTimer = setTimeout(() => {
+ this.$emit('change', html);
+ },300);
+ },
+
+ onSelectionChange(range, oldRange) {
+ if (range === null && oldRange !== null) {
+ this.$emit('blur');
+ } else if (range !== null && oldRange === null) {
+ this.$emit('focus');
+ }
+ },
+
+ handleImage() {
+ if (this.disabled || this.readonly) return;
+ this.$refs.fileInput.value = '';
+ this.$refs.fileInput.click();
+ },
+
+ onFileChange(e) {
+ const file = e.target.files && e.target.files[0];
+ if (!file) return;
+
+ if (this.imageHandler) {
+ const range = this.quill.getSelection(true);
+ Promise.resolve(this.imageHandler(file, range, this.quill))
+ .then((result) => {
+ if (result === false) {
+ this.insertImageAsBase64(file);
+ }
+ })
+ .catch(() => {
+ this.insertImageAsBase64(file);
+ });
+ return;
+ }
+
+ this.insertImageAsBase64(file);
+ },
+
+ insertImageAsBase64(file) {
+ if (file.size > SIZE_THRESHOLD) {
+ if (this.$message && this.$message.warning) {
+ this.$message.warning('图片过大(>5MB),建议压缩后上传');
+ }
+ }
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const dataUrl = e.target.result;
+ const range = this.quill.getSelection(true);
+ const index = range ? range.index : this.quill.getLength();
+ this.quill.insertEmbed(index, 'image', dataUrl, Quill.sources.USER);
+ };
+ reader.readAsDataURL(file);
+ },
+
+ renderError(msg) {
+ console.error('[QuillEditor]', msg);
+ const el = this.$refs.editor;
+ if (el) {
+ el.innerHTML = `<div class="quill-editor-error" style="padding:16px;border:1px dashed #f56c6c;color:#f56c6c;">${msg}</div>`;
+ }
+ },
+
+ // ====== Public Methods ======
+
+ getHtml() {
+ if (!this.quill) return String(this.value || '');
+ return this.quill.root.innerHTML;
+ },
+
+ getText() {
+ if (!this.quill) return '';
+ return this.quill.getText();
+ },
+
+ setHtml(html) {
+ if (!this.quill) return;
+ const safe = String(html || '');
+ this.quill.clipboard.dangerouslyPasteHTML(0, safe);
+ },
+
+ clear() {
+ if (!this.quill) return;
+ this.quill.setText('');
+ },
+
+ focus() {
+ if (this.quill) this.quill.focus();
+ },
+
+ getQuill() {
+ return this.quill;
+ },
+ },
+};
+</script>
+
+<style scoped>
+.quill-editor-wrapper {
+ background: #fff;
+ border:1px solid #dcdfe6;
+ border-radius:4px;
+}
+
+.quill-editor-wrapper.is-disabled {
+ background: #f5f7fa;
+ pointer-events: none;
+ opacity:0.7;
+}
+
+.quill-editor-wrapper >>> .ql-toolbar {
+ border-bottom:1px solid #dcdfe6;
+ border-top-left-radius:4px;
+ border-top-right-radius:4px;
+}
+
+.quill-editor-wrapper >>> .ql-container {
+ border-bottom-left-radius:4px;
+ border-bottom-right-radius:4px;
+ font-size:14px;
+}
+
+.quill-editor-wrapper >>> .ql-editor {
+ min-height:200px;
+}
+
+.quill-editor-wrapper >>> .ql-editor img {
+ max-width:100%;
+}
+</style>
+```
+
+- [] **Step3.2:验证文件创建**
+
+Run:
+```bash
+ls -la "D:\web\wujie\wujie-wk\wujie-vue2-child\src\views\element\quillEditor\index.vue"
+```
+
+Expected: 文件存在
+
+- [] **Step3.3: Commit**
+
+```bash
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" add src/views/element/quillEditor/index.vue
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" commit -m "feat(quillEditor): add QuillEditor component with v-model, table, base64 image"
+```
+
+---
+
+## Task4:写 example.vue(三个实例对比 Demo)
+
+**Files:**
+- Create: `src/views/element/quillEditor/example.vue`
+
+- [] **Step4.1: 创建 example.vue**
+
+Write the following content to `src/views/element/quillEditor/example.vue`:
+
+```vue
+<template>
+ <div class="quill-demo">
+ <h3>实例1:基础编辑器(v-model双向绑定)</h3>
+ <QuillEditor
+ v-model="content1"
+ :height="280"
+ @change="onChange"
+ @ready="onReady"
+ />
+
+ <h3>实例2:只读模式(readonly)</h3>
+ <QuillEditor v-model="content2" :readonly="true" :height="200" />
+
+ <h3>实例3:禁用模式(disabled,工具栏灰掉)</h3>
+ <QuillEditor v-model="content3" :disabled="true" :height="200" />
+
+ <h3>当前实例1 的 v-model 内容:</h3>
+ <pre class="content-preview">{{ content1 }}</pre>
+ </div>
+</template>
+
+<script>
+import QuillEditor from './index.vue';
+
+const SAMPLE_WITH_TABLE = `<h2>富文本编辑器示例</h2>
+<p>这是一个 <strong>Quill</strong> 富文本编辑器示例,包含以下功能:</p>
+<ul>
+ <li>基础格式:加粗、斜体、下划线、删除线</li>
+ <li>标题、段落、引用、列表</li>
+ <li>字体、颜色、对齐、缩进</li>
+ <li>图片(支持 base64 内联)</li>
+ <li>表格(quill-table-better)</li>
+</ul>
+<table>
+ <thead>
+ <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
+ </thead>
+ <tbody>
+ <tr><td>张三</td><td>28</td><td>北京</td></tr>
+ <tr><td>李四</td><td>32</td><td>上海</td></tr>
+ </tbody>
+</table>
+<p>试着编辑上方内容,查看下方 <code>v-model</code> 输出。</p>`;
+
+export default {
+ name: 'QuillEditorDemo',
+ components: { QuillEditor },
+ data() {
+ return {
+ content1: SAMPLE_WITH_TABLE,
+ content2: SAMPLE_WITH_TABLE,
+ content3: SAMPLE_WITH_TABLE,
+ };
+ },
+ methods: {
+ onChange(html) {
+ // eslint-disable-next-line no-console
+ console.log('[QuillDemo] change:', html.slice(0,80) + '...');
+ },
+ onReady(quill) {
+ // eslint-disable-next-line no-console
+ console.log('[QuillDemo] ready, Quill version:', quill.version);
+ },
+ },
+};
+</script>
+
+<style scoped>
+.quill-demo {
+ padding:20px;
+}
+
+.quill-demo h3 {
+ margin:24px012px;
+ font-size:16px;
+ color: #303133;
+}
+
+.quill-demo h3:first-child {
+ margin-top:0;
+}
+
+.content-preview {
+ background: #f5f7fa;
+ border:1px solid #dcdfe6;
+ border-radius:4px;
+ padding:12px;
+ font-size:12px;
+ font-family: Consolas, 'Courier New', monospace;
+ white-space: pre-wrap;
+ word-break: break-all;
+ max-height:200px;
+ overflow: auto;
+}
+</style>
+```
+
+- [] **Step4.2:验证文件创建**
+
+Run:
+```bash
+ls -la "D:\web\wujie\wujie-wk\wujie-vue2-child\src\views\element\quillEditor\example.vue"
+```
+
+Expected: 文件存在
+
+- [] **Step4.3: Commit**
+
+```bash
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" add src/views/element/quillEditor/example.vue
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" commit -m "feat(quillEditor): add demo page with three editor instances"
+```
+
+---
+
+## Task5:写 README.md(使用文档)
+
+**Files:**
+- Create: `src/views/element/quillEditor/README.md`
+
+- [] **Step5.1: 创建 README.md**
+
+Write the following content to `src/views/element/quillEditor/README.md`:
+
+```markdown
+# QuillEditor
+
+基于 Quill2.x + quill-table-better 的 Vue2 富文本编辑器组件,支持表格、图片、全部基础格式。
+
+## 安装依赖
+
+依赖已添加到 `package.json`,首次使用需安装:
+
+```bash
+npm install
+```
+
+依赖列表:
+- `quill@2.0.2`
+- `quill-table-better@1.2.3`
+
+##快速使用
+
+```vue
+<template>
+ <QuillEditor v-model="content" :height="400" />
+</template>
+
+<script>
+import QuillEditor from '@/views/element/quillEditor/index.vue';
+
+export default {
+ components: { QuillEditor },
+ data() {
+ return { content: '<p>Hello Quill!</p>' };
+ },
+};
+</script>
+```
+
+## Props
+
+| Prop | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `value` | String | `''` | 编辑器 HTML 内容,支持 v-model |
+| `placeholder` | String | `'请输入内容...'` | 占位文字 |
+| `readonly` | Boolean | `false` | 是否只读(可看不可改) |
+| `disabled` | Boolean | `false` | 是否禁用(工具栏灰掉,不可编辑) |
+| `height` | String \| Number | `300` | 编辑区高度,数字按 px,字符串按原值 |
+| `toolbar` | Array \| Object | 默认全量工具栏 | 自定义工具栏配置;不传则用默认全量 |
+| `imageHandler` | Function | `null` | 自定义图片处理函数;不传则走 base64 内联 |
+| `theme` | String | `'snow'` |主题,目前只支持 snow |
+
+## Events
+
+|事件 |触发时机 | 参数 |
+|------|---------|------|
+| `input` | 内容变化 | `(html: String)` |
+| `change` | 内容变化(去抖300ms) | `(html: String)` |
+| `ready` | Quill 实例初始化完成 | `(quill: Quill)` |
+| `focus` | 编辑器获得焦点 | `()` |
+| `blur` | 编辑器失去焦点 | `()` |
+
+## Methods(通过 ref 调用)
+
+| 方法 | 返回值 | 说明 |
+|------|--------|------|
+| `getHtml()` | String | 获取当前 HTML |
+| `getText()` | String | 获取纯文本 |
+| `setHtml(html)` | - | 设置内容 |
+| `clear()` | - | 清空内容 |
+| `focus()` | - |聚焦 |
+| `getQuill()` | Quill | 获取底层 Quill 实例(高级用法) |
+
+## 自定义图片上传示例
+
+```vue
+<QuillEditor
+ v-model="content"
+ :image-handler="uploadImage"
+/>
+
+<script>
+methods: {
+ async uploadImage(file, range, quill) {
+ const form = new FormData();
+ form.append('file', file);
+ const res = await fetch('/api/upload', { method: 'POST', body: form });
+ const { url } = await res.json();
+ quill.insertEmbed(range.index, 'image', url);
+ return true; // 返回 true 表示已处理,跳过 base64 回退
+ },
+}
+</script>
+```
+
+## 默认工具栏(全量)
+
+```javascript
+[
+ [{ header: [1,2,3,4,5,6, false] }],
+ [{ font: [] }],
+ [{ size: ['small', false, 'large', 'huge'] }],
+ ['bold', 'italic', 'underline', 'strike'],
+ [{ color: [] }, { background: [] }],
+ [{ script: 'sub' }, { script: 'super' }],
+ ['blockquote', 'code-block'],
+ [{ list: 'ordered' }, { list: 'bullet' }],
+ [{ indent: '-1' }, { indent: '+1' }],
+ [{ align: [] }],
+ ['link', 'image', 'video'],
+ ['table-better'],
+ ['clean'],
+ ['undo', 'redo'],
+]
+```
+
+##表格功能
+
+点击工具栏的 `table-better`按钮可插入表格,右键单元格可弹出操作菜单(增删行列、合并/拆分、单元格背景色、复制/删除)。
+
+表格配置见 `toolbar.js` 中 `defaultTableBetterConfig`:
+- `language: 'zh_CN'` 中文界面
+- `toolbarTable: true` 显示表格工具栏
+- `menus`包含 column/row/merge/table/cell/wrap/copy/delete全部操作
+
+##主题与样式
+
+组件内部已 `import 'quill/dist/quill.snow.css'` 和 `quill-table-better/dist/quill-table-better.css`,
+**不需要在 main.js 全局引入**。外层容器样式 scoped,不污染全局。
+```
+
+- [] **Step5.2:验证文件创建**
+
+Run:
+```bash
+ls -la "D:\web\wujie\wujie-wk\wujie-vue2-child\src\views\element\quillEditor\README.md"
+```
+
+Expected: 文件存在
+
+- [] **Step5.3: Commit**
+
+```bash
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" add src/views/element/quillEditor/README.md
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" commit -m "docs(quillEditor): add README with API docs and usage examples"
+```
+
+---
+
+## Task6:人工验证(无测试框架)
+
+**Files:** 无
+
+本项目无 jest/vitest,通过运行 dev 服务器 +浏览器人工验证。
+
+- [] **Step6.1:启动 dev 服务器**
+
+Run:
+```bash
+cd "D:\web\wujie\wujie-wk\wujie-vue2-child" && npm run serve
+```
+
+Expected:编译成功,无报错;浏览器访问 `http://localhost:8080/element`(或对应路由)
+
+- [] **Step6.2:验证三个实例都正常渲染**
+
+打开 element页面 → 点击 "Quill编辑器" tab
+
+Expected:
+- 实例1:显示初始内容(含表格),工具栏可用
+- 实例2:显示同样内容,但内容区和工具栏都不可交互(只读)
+- 实例3:显示同样内容,工具栏灰掉,不可编辑
+
+- [] **Step6.3:验证 v-model双向同步**
+
+在实例1 中输入/删除/修改任意文字
+
+Expected:下方 "当前实例1 的 v-model 内容"区域的 `<pre>`实时更新
+
+- [] **Step6.4:验证表格功能**
+
+在实例1 中点击工具栏的 `table-better`按钮 →弹出表格插入对话框 →插入3x3表格
+
+Expected:表格正确插入,右键单元格弹出操作菜单
+
+- [] **Step6.5:验证图片 base64 内联**
+
+在实例1 中点击工具栏的图片按钮 → 选择本地图片
+
+Expected: 图片以 base64形式插入到编辑器;浏览器 DevTools Network面板无图片请求(说明是内联)
+
+- [] **Step6.6:验证组件销毁无报错**
+
+切换到其他 tab 再切回 "Quill编辑器" tab
+
+Expected:浏览器 Console 无报错(无 Quill重复挂载、事件未清理等)
+
+- [] **Step6.7:提交验证记录**
+
+如果所有验证通过,提交一条说明 commit:
+
+```bash
+git -C "D:\web\wujie\wujie-wk\wujie-vue2-child" commit --allow-empty -m "chore(quillEditor): manual verification passed (3 instances, table, base64 image)"
+```
+
+---
+
+## 完成
+
+所有任务完成后,QuillEditor组件即在 `src/views/element/quillEditor/` 下可用,
+`src/views/element/index.vue` 中已 import 该组件,无需修改 tab 文件。