{"_id":"@agilehub/agile-editor","_rev":"3-fd88e0374cbab2132740052f87f2a236","name":"@agilehub/agile-editor","dist-tags":{"latest":"1.3.0"},"versions":{"1.0.0":{"name":"@agilehub/agile-editor","version":"1.0.0","keywords":["docs editor","document editor","editor","office edtior","online office","richtext editor","tiptap","tiptap3","vue editor","vue3 editor","web editor","web office","word editor"],"author":{"name":"agilehub"},"license":"MIT","_id":"@agilehub/agile-editor@1.0.0","maintainers":[{"name":"liuyuantao","email":"lytdev@outlook.com"}],"dist":{"shasum":"e39cd6865a7dd52722730d780c3d62dde8117223","tarball":"https://registry.npmjs.org/@agilehub/agile-editor/-/agile-editor-1.0.0.tgz","fileCount":5,"integrity":"sha512-R/GK/4ukhNXc2nWeAftumhVmRgQcYrYSf+y3Yga7K/793Cq4+dCYr95wSM7Va62y++Cb9H/YcRua+4zNXeyVUg==","signatures":[{"sig":"MEYCIQC1MClfXtZtR1LsCvUeJpeUlkxmbQNpB3LkNW7S2U5IawIhAJXS71YtCpcNYbdijxorXIip/m6be/7HMM+a681WaD9m","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2118148},"type":"module","engines":{"node":">=18.0.0"},"exports":{".":{"import":"./dist/agile-editor.js"},"./style":{"import":"./dist/agile-editor.css"}},"gitHead":"26f6a142b9cc6d8daafb5d3709780b49adf68f21","scripts":{"dev":"vite --port 9000 --open --force","lint":"oxlint --fix src","build":"vite build","format":"oxfmt --write .","prepare":"husky","analyzer":"vite-bundle-visualizer","prepublishOnly":"npm run build"},"_npmUser":{"name":"liuyuantao","email":"lytdev@outlook.com"},"overrides":{"rolldown":"1.0.0-rc.5"},"_npmVersion":"11.6.4","description":"Flex Editor 是一个基于 Vue3 和 Tiptap3 的本土化开源文档编辑器，提供类似于 Microsoft Word 的在线编辑功能和浏览体验。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式和普通 Web 模式、Markdown 语法、富文本编辑、多种格式的节点插入等功能。","directories":{},"lint-staged":{"*.{js,vue,less}":["oxfmt --write src","oxlint --fix src"]},"_nodeVersion":"24.11.1","dependencies":{"nzh":"1.0.14","yjs":"13.6.29","katex":"0.16.33","lowlight":"3.3.0","vue-i18n":"11.2.8","es-drager":"1.2.11","fast-glob":"3.3.3","jsbarcode":"3.12.3","@tiptap/pm":"3.20.0","file-saver":"2.0.5","hotkeys-js":"4.0.2","y-protocols":"1.0.6","@tiptap/core":"3.20.0","@vueuse/core":"14.2.1","pretty-bytes":"7.1.0","@tiptap/vue-3":"3.20.0","pure-svg-code":"1.0.6","y-prosemirror":"1.2.15","@floating-ui/dom":"1.7.5","@tiptap/y-tiptap":"3.0.2","smooth-signature":"1.0.15","dom-to-image-more":"3.7.2","@tiptap/extensions":"3.20.0","@tiptap/suggestion":"3.20.0","@tiptap/starter-kit":"3.20.0","@eslint/object-schema":"3.0.2","@tiptap/extension-bold":"3.20.0","@tiptap/extension-link":"3.20.0","@tiptap/extension-list":"3.20.0","@tiptap/extension-image":"3.20.0","@tiptap/extension-table":"3.20.0","@umoteam/editor-external":"10.1.0","@tiptap/extension-details":"3.20.0","@tiptap/extension-heading":"^3.23.1","@tiptap/extension-mention":"3.20.0","@tiptap/extension-document":"3.20.0","@tool-belt/type-predicates":"1.4.1","@tiptap/extension-paragraph":"^3.23.1","@tiptap/extension-subscript":"3.20.0","@tiptap/extension-unique-id":"3.20.0","@tiptap/extension-code-block":"3.20.0","@tiptap/extension-node-range":"3.20.0","@tiptap/extension-text-align":"3.20.0","@tiptap/extension-text-style":"3.20.0","@tiptap/extension-typography":"3.20.0","@tiptap/extension-drag-handle":"3.16.0","@tiptap/extension-mathematics":"3.20.0","@tiptap/extension-superscript":"3.20.0","tiptap-track-change-extension":"^1.3.0","@tiptap/extension-collaboration":"3.20.0","@tiptap/extension-horizontal-rule":"3.20.0","@tiptap/extension-drag-handle-vue-3":"3.16.0","@tiptap/extension-table-of-contents":"3.20.0","@tiptap/extension-code-block-lowlight":"3.20.0","@tiptap/extension-invisible-characters":"3.20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.29","less":"^4.5.1","vite":"^7.3.1","husky":"^9.1.7","oxfmt":"^0.35.0","oxlint":"^1.50.0","postcss":"^8.5.6","less-loader":"^12.3.1","lint-staged":"^16.2.7","postcss-html":"^1.8.1","unplugin-vue":"^7.1.1","tdesign-vue-next":"1.18.2","@vitejs/plugin-vue":"^6.0.4","unplugin-vue-macros":"^2.14.5","unplugin-auto-import":"^21.0.0","vite-plugin-svg-icons":"^2.0.1","vite-bundle-visualizer":"^1.2.1","unplugin-vue-components":"^31.0.0","@vue-macros/reactivity-transform":"^3.1.2"},"_npmOperationalInternal":{"tmp":"tmp/agile-editor_1.0.0_1779849011401_0.9388161138489226","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@agilehub/agile-editor","version":"1.2.0","keywords":["docs editor","document editor","editor","office edtior","online office","richtext editor","tiptap","tiptap3","vue editor","vue3 editor","web editor","web office","word editor"],"author":{"name":"agilehub"},"license":"MIT","_id":"@agilehub/agile-editor@1.2.0","maintainers":[{"name":"liuyuantao","email":"lytdev@outlook.com"}],"dist":{"shasum":"bda2ccae4f3a316ebbd8b7fa54630dd45bfa4d2e","tarball":"https://registry.npmjs.org/@agilehub/agile-editor/-/agile-editor-1.2.0.tgz","fileCount":5,"integrity":"sha512-Gwc0/ZCoaEy9iQArXCIalU5ZJXOXaQ5c6cBB6/jQem5JQk5ykCBOhiwqB5/7bSZ98IVGj9z6OHxeUW+oz25pWg==","signatures":[{"sig":"MEQCIFIhEDYFuJhUg2Ib/fnbE05UXOu//YWFbsMkX/BSF1XLAiBDbjgmvPqePTgZq2T2zgidCVGtwYRK2JaUlBPSaQrpLQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1979072},"type":"module","engines":{"node":"^20.19.0 || >=22.12.0"},"exports":{".":{"import":"./dist/agile-editor.js"},"./style":{"import":"./dist/agile-editor.css"}},"gitHead":"9a5f88058c22fa59d41bd0e817fbf62f19a64bee","scripts":{"dev":"vite --port 9000 --open --force","lint":"oxlint --fix src","build":"vite build","format":"oxfmt --write .","prepare":"husky","analyzer":"vite-bundle-visualizer","prepublishOnly":"npm run build"},"_npmUser":{"name":"liuyuantao","email":"lytdev@outlook.com"},"overrides":{"rolldown":"^1.1.3"},"lastUpdate":"2026-09-01","_npmVersion":"11.17.0","description":"Agile Editor 是一个基于 Vue3 和 Tiptap3 的本土化开源文档编辑器，提供类似于 Microsoft Word 的在线编辑功能和浏览体验。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式和普通 Web 模式、Markdown 语法、富文本编辑、多种格式的节点插入等功能。","directories":{},"lint-staged":{"*.{js,vue,less}":["oxfmt --write src","oxlint --fix src"]},"_nodeVersion":"24.19.0","dependencies":{"nzh":"1.0.14","yjs":"13.6.29","katex":"0.16.33","lowlight":"3.3.0","vue-i18n":"11.2.8","cropperjs":"^2.1.1","es-drager":"1.2.11","fast-glob":"3.3.3","jsbarcode":"3.12.3","@tiptap/pm":"3.20.0","file-saver":"2.0.5","hotkeys-js":"4.0.2","y-protocols":"1.0.6","@tiptap/core":"3.20.0","@vueuse/core":"14.2.1","pretty-bytes":"7.1.0","@tiptap/vue-3":"3.20.0","pure-svg-code":"1.0.6","y-prosemirror":"1.2.15","@floating-ui/dom":"1.7.5","@tiptap/y-tiptap":"3.0.2","smooth-signature":"1.0.15","tdesign-vue-next":"1.20.6","dom-to-image-more":"3.7.2","@tiptap/extensions":"3.20.0","@tiptap/suggestion":"3.20.0","@tiptap/starter-kit":"3.20.0","@eslint/object-schema":"3.0.2","@tiptap/extension-bold":"3.20.0","@tiptap/extension-link":"3.20.0","@tiptap/extension-list":"3.20.0","@tiptap/extension-image":"3.20.0","@tiptap/extension-table":"3.20.0","@umoteam/editor-external":"10.1.0","@tiptap/extension-details":"3.20.0","@tiptap/extension-heading":"^3.23.1","@tiptap/extension-mention":"3.20.0","@tiptap/extension-document":"3.20.0","@tool-belt/type-predicates":"1.4.1","@tiptap/extension-paragraph":"^3.23.1","@tiptap/extension-subscript":"3.20.0","@tiptap/extension-unique-id":"3.20.0","@tiptap/extension-code-block":"3.20.0","@tiptap/extension-node-range":"3.20.0","@tiptap/extension-text-align":"3.20.0","@tiptap/extension-text-style":"3.20.0","@tiptap/extension-typography":"3.20.0","@tiptap/extension-drag-handle":"3.16.0","@tiptap/extension-mathematics":"3.20.0","@tiptap/extension-superscript":"3.20.0","@tiptap/extension-collaboration":"3.20.0","@tiptap/extension-horizontal-rule":"3.20.0","@tiptap/extension-drag-handle-vue-3":"3.16.0","@tiptap/extension-table-of-contents":"3.20.0","@tiptap/extension-code-block-lowlight":"3.20.0","@tiptap/extension-invisible-characters":"3.20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.29","less":"^4.5.1","vite":"^7.3.1","husky":"^9.1.7","oxfmt":"^0.35.0","oxlint":"^1.50.0","esbuild":"^0.28.1","postcss":"^8.5.6","less-loader":"^12.3.1","lint-staged":"^16.2.7","postcss-html":"^1.8.1","unplugin-vue":"^7.1.1","@vitejs/plugin-vue":"^6.0.4","unplugin-vue-macros":"^2.14.5","unplugin-auto-import":"^21.0.0","vite-plugin-svg-icons":"^2.0.1","vite-bundle-visualizer":"^1.2.1","unplugin-vue-components":"^31.0.0","@vue-macros/reactivity-transform":"^3.1.2"},"_npmOperationalInternal":{"tmp":"tmp/agile-editor_1.2.0_1788222427263_0.6891054904858156","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"_id":"@agilehub/agile-editor@1.3.0","dist":{"shasum":"20565935dc6d74bc13af013ed5d59836b75db5c0","tarball":"https://registry.npmjs.org/@agilehub/agile-editor/-/agile-editor-1.3.0.tgz","fileCount":5,"integrity":"sha512-vzb+QP+P0Xb92gJaCFedsmC2ouXJj4cn0fX8+uOtyz3Ie5tr1ojEMQ1PCR2+fccYmLWgeyFi5fML7y8g5+8stw==","signatures":[{"sig":"MEUCIC+CYRgBGZveVsaGJCwbNz8BpQA/iGzG8zBQry/sESMQAiEAvIvco1izhtOhVBVpTRkpD9Dfma3B+6GfQV+uQ5rpKK0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCdxOrquc1MKRfITsSft7n6e0zQmKefux9sBDdNHnJVRQIgEjgEATp4UWU15ib5y4lSFFAcHBDlyTAgH308sGBWI9E="}],"unpackedSize":1998193},"name":"@agilehub/agile-editor","type":"module","author":{"name":"agilehub"},"engines":{"node":"^20.19.0 || >=22.12.0"},"exports":{".":{"import":"./dist/agile-editor.js"},"./style":{"import":"./dist/agile-editor.css"}},"gitHead":"445dd47278007681ed008244b4f0ba560eedfef7","license":"MIT","scripts":{"dev":"vite --port 9000 --open --force","lint":"oxlint --fix src","build":"vite build","format":"oxfmt --write .","prepare":"husky","analyzer":"vite-bundle-visualizer","prepublishOnly":"npm run build"},"version":"1.3.0","_npmUser":{"name":"liuyuantao","email":"lytdev@outlook.com"},"keywords":["docs editor","document editor","editor","office edtior","online office","richtext editor","tiptap","tiptap3","vue editor","vue3 editor","web editor","web office","word editor"],"overrides":{"rolldown":"^1.1.3"},"lastUpdate":"2026-09-01","_npmVersion":"11.17.0","description":"Agile Editor 是一个基于 Vue3 和 Tiptap3 的本土化开源文档编辑器，提供类似于 Microsoft Word 的在线编辑功能和浏览体验。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式和普通 Web 模式、Markdown 语法、富文本编辑、多种格式的节点插入等功能。","directories":{},"lint-staged":{"*.{js,vue,less}":["oxfmt --write src","oxlint --fix src"]},"maintainers":[{"name":"liuyuantao","email":"lytdev@outlook.com"}],"_nodeVersion":"24.19.0","dependencies":{"nzh":"1.0.14","yjs":"13.6.29","katex":"0.16.33","lowlight":"3.3.0","vue-i18n":"11.2.8","cropperjs":"^2.1.1","es-drager":"1.2.11","fast-glob":"3.3.3","jsbarcode":"3.12.3","@tiptap/pm":"3.20.0","file-saver":"2.0.5","hotkeys-js":"4.0.2","y-protocols":"1.0.6","@tiptap/core":"3.20.0","@vueuse/core":"14.2.1","pretty-bytes":"7.1.0","@tiptap/vue-3":"3.20.0","pure-svg-code":"1.0.6","y-prosemirror":"1.2.15","@floating-ui/dom":"1.7.5","@tiptap/y-tiptap":"3.0.2","smooth-signature":"1.0.15","tdesign-vue-next":"1.20.6","dom-to-image-more":"3.7.2","@tiptap/extensions":"3.20.0","@tiptap/suggestion":"3.20.0","@tiptap/starter-kit":"3.20.0","@eslint/object-schema":"3.0.2","@tiptap/extension-bold":"3.20.0","@tiptap/extension-link":"3.20.0","@tiptap/extension-list":"3.20.0","@tiptap/extension-image":"3.20.0","@tiptap/extension-table":"3.20.0","@umoteam/editor-external":"10.1.0","@tiptap/extension-details":"3.20.0","@tiptap/extension-heading":"^3.23.1","@tiptap/extension-mention":"3.20.0","@tiptap/extension-document":"3.20.0","@tool-belt/type-predicates":"1.4.1","@tiptap/extension-paragraph":"^3.23.1","@tiptap/extension-subscript":"3.20.0","@tiptap/extension-unique-id":"3.20.0","@tiptap/extension-code-block":"3.20.0","@tiptap/extension-node-range":"3.20.0","@tiptap/extension-text-align":"3.20.0","@tiptap/extension-text-style":"3.20.0","@tiptap/extension-typography":"3.20.0","@tiptap/extension-drag-handle":"3.16.0","@tiptap/extension-mathematics":"3.20.0","@tiptap/extension-superscript":"3.20.0","@tiptap/extension-collaboration":"3.20.0","@tiptap/extension-horizontal-rule":"3.20.0","@tiptap/extension-drag-handle-vue-3":"3.16.0","@tiptap/extension-table-of-contents":"3.20.0","@tiptap/extension-code-block-lowlight":"3.20.0","@tiptap/extension-invisible-characters":"3.20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.29","less":"^4.5.1","vite":"^7.3.1","husky":"^9.1.7","oxfmt":"^0.35.0","oxlint":"^1.50.0","esbuild":"^0.28.1","postcss":"^8.5.6","less-loader":"^12.3.1","lint-staged":"^16.2.7","postcss-html":"^1.8.1","unplugin-vue":"^7.1.1","@vitejs/plugin-vue":"^6.0.4","unplugin-vue-macros":"^2.14.5","unplugin-auto-import":"^21.0.0","vite-plugin-svg-icons":"^2.0.1","vite-bundle-visualizer":"^1.2.1","unplugin-vue-components":"^31.0.0","@vue-macros/reactivity-transform":"^3.1.2"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/agile-editor_1.3.0_1788915591347_0.4852003521771937"}}},"time":{"created":"2026-05-27T02:30:11.253Z","modified":"2026-09-09T00:59:51.724Z","1.0.0":"2026-05-27T02:30:11.618Z","1.2.0":"2026-09-01T00:27:07.449Z","1.3.0":"2026-09-09T00:59:51.450Z"},"author":{"name":"agilehub"},"license":"MIT","keywords":["docs editor","document editor","editor","office edtior","online office","richtext editor","tiptap","tiptap3","vue editor","vue3 editor","web editor","web office","word editor"],"description":"Agile Editor 是一个基于 Vue3 和 Tiptap3 的本土化开源文档编辑器，提供类似于 Microsoft Word 的在线编辑功能和浏览体验。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式和普通 Web 模式、Markdown 语法、富文本编辑、多种格式的节点插入等功能。","maintainers":[{"name":"liuyuantao","email":"lytdev@outlook.com"}],"readme":"# 项目介绍\r\n\r\nAgile Editor 是一个基于 Vue3 和 Tiptap3 的本土化开源文档编辑器，提供类似于 Microsoft Word 的在线编辑功能和浏览体验。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式和普通 Web 模式、Markdown 语法、富文本编辑、多种格式的节点插入等功能。\r\n\r\n\r\n## 目录结构\r\n```\r\n├─assets\r\n│  ├─icons // svg图标目录\r\n│  ├─images // 项目用到的图片\r\n│  └─styles // 项目定义的样式及变量\r\n├─components // 编辑器区域内容（操作栏/编辑器/底部栏等）\r\n│  ├─container // 页面布局容器\r\n│  ├─editor // 内容编辑区域\r\n│  ├─menus // 菜单\r\n│  │  ├─block // 鼠标悬停在段落后左侧呈现的快捷菜单\r\n│  │  ├─bubble // 内容选中后的浮动菜单\r\n│  │  │  ├─callout // 高亮块\r\n│  │  │  ├─file // 文件\r\n│  │  │  ├─image // 图片\r\n│  │  │  ├─link // 链接\r\n│  │  │  ├─node // 未细分类的node\r\n│  │  │  ├─tag // 标签\r\n│  │  │  ├─text-box // 文本框\r\n│  │  │  └─webpage // 网页\r\n│  │  └─toolbar // 顶部菜单栏\r\n│  │      ├─base // 开始菜单的内容\r\n│  │      ├─insert // 插入菜单的内容\r\n│  │      ├─table // 表格菜单的内容\r\n│  │      ├─tools // 工具菜单的内容\r\n│  │      └─view // 视图菜单的内容\r\n│  ├─picker // 公共选择器组件\r\n│  ├─statusbar // 底部状态栏\r\n│  └─toolbar // 顶部操作栏\r\n├─composable //共享工具函数\r\n├─extensions // 扩展组件\r\n│  ├─audio // 音频\r\n│  ├─callout // 高亮块\r\n│  ├─code-block // 代码块\r\n│  ├─columns // 分栏\r\n│  ├─file // 文件\r\n│  ├─footnotes // 脚注\r\n│  ├─iframe // iframe\r\n│  ├─image // 图片\r\n│  ├─office-paste // 粘贴功能\r\n│  ├─tag // 标签\r\n│  ├─text-box // 文本框\r\n│  └─video // 视频\r\n├─locales // 语言国际化\r\n├─options // 编辑器配置\r\n│  └─config // 默认配置\r\n└─utils // 工具\r\n```\r\n\r\n## 研发参考\r\n* [WPS云文档](https://www.kdocs.cn/latest)\r\n* [飞书云文档](https://my.feishu.cn/drive/home/)\r\n\r\n## 基本介绍\r\n### 组件使用说明\r\n* [TDesign Vue Next for Web](https://tdesign.tencent.com/vue-next/getting-started)\r\n* [Umo Editor组件列表](https://dev.umodoc.com/cn/docs/editor/components)\r\n\r\n### 图标使用说明\r\n\r\nsvg参考来源：\r\n* [iconfont](https://www.iconfont.cn/)\r\n* [IconPark](https://iconpark.oceanengine.com/official)\r\n\r\n图标采用svg的方式，在src/assets/icons目录下管理。添加新的图标时，请按照以下步骤进行：\r\n1. 创建一个名为`iconName`.svg的文件，将图标的svg代码复制到文件中。\r\n2. 在组件是使用ico=\"`iconName`\"的形式引入图标。\r\n\r\n\r\n### 添加菜单\r\n\r\n#### 添加总菜单\r\n`src\\options\\config\\index.js`的`toolbar.menus`  添加主菜单的value\r\n`src\\components\\toolbar\\index.vue`文件的`defaultToolbarMenus`添加数据\r\n`src\\locales\\zh-CN.json`添加汉化\r\n`src\\components\\toolbar\\classic.vue`和`src\\components\\toolbar\\ribbon.vue`添加条件判断`<template v-if=\"currentMenu === 'tools'\">`\r\n\r\n\r\n#### 添加子菜单\r\n在对应的总菜单目录下创建子菜单组件如`src\\components\\menus\\toolbar\\review\\annotation.vue`\r\n组件的图标`ico=\"annotation\"`需要在`src\\assets\\icons`里面添加svg图，然后图标下面的文字`:text=\"t('review.annotation')\"`需要在`src\\locales\\zh-CN.json`里面的`review.annotation`添加中文汉化\r\n在`src\\components\\toolbar\\classic.vue`和`src\\components\\toolbar\\ribbon.vue`里面添加组件`<menus-toolbar-tools-annotation />`，\r\n\r\n###自定义组件\r\n### 创建组件文件夹 \r\n在`extensions`文件夹创建目录`circle-text`,里面包含index.js和node-view.vue\r\n\r\n\r\n## 使用方法\r\n### 配置文档保存方法\r\n直接在编辑器配置中定义方法\r\nconst options = {\r\n  async onSave(content, page, document) { },\r\n}\r\n\r\n\r\n### 配置文件上传方法\r\n直接在编辑器配置中定义方法\r\nconst options = {\r\n  async onFileUpload(file) { },\r\n  onFileDelete(id, url, type) { }\r\n}\r\n\r\n### 配置修订模式是否开启\r\n#### 1.直接在编辑器配置extensions中定义,通过enabled的值来定义是否开启\r\nconst options = {\r\n  extensions: [\r\n    TrackChangeExtension.configure({\r\n      enabled: false,\r\n      dataOpUserId: 'u-1001',\r\n      dataOpUserNickname: 'Alice',\r\n    }),\r\n  ]\r\n}\r\n#### 2.或者通过编辑器方法\r\neditor.value?.commands?.toggleTrackChangeStatus?.();\r\n\r\n\r\n### 常用方法\r\n* 获取选取的文本\r\n``` javascript\r\nimport { getSelectionText } from '@/utils/selection'\r\nconst selectedText = getSelectionText(editor.value)\r\n```\r\n`editor.value.getText() / editor.value.getHTML()` 返回的是整篇文档的纯文本/HTML，不是选中内容。\r\n如果还想要选中的富文本结构（不是纯文本），可以看 `editor.value.state.doc.slice(from, to)` 或 `state.doc.cut(from, to)`，再自行序列化成 HTML。\r\n\r\n* 关于`editor?.isActive`的用法\r\n> editor?.isActive 是 Tiptap Editor 实例 上的方法（@tiptap/core 自带），用来判断当前光标/选区处某个节点(node)或标记(mark)是否处于激活状态。项目里 editor 是从 index.vue 通过 inject('editor') 注入的 ref，所以在 <template> 里自动解包写成 editor?.isActive(...)，在 <script> 里要写 editor.value?.isActive(...)。\r\n\r\n它有两种签名：\r\n```javascript\r\nisActive(name)              // 只按类型名判断\r\nisActive(name, attributes)  // 按类型名 + 属性值判断\r\nisActive(attributes)        // 只按属性值判断（自动遍历所有节点/标记）\r\n```\r\n项目里的四种用法\r\n\r\n1. 只传标记/节点名 —— 判断该类型是否激活\r\n```javascript\r\n<!-- bold.vue:7  加粗标记 -->\r\n:menu-active=\"editor?.isActive('bold')\"\r\n\r\n<!-- line-height.vue:8  段落/标题节点（配合 && 组合判断） -->\r\n:disabled=\"!editor?.isActive('paragraph') && !editor?.isActive('heading')\"\r\n\r\n<!-- table/type.vue:7  是否在表格内 -->\r\n:disabled=\"!editor?.isActive('table')\"\r\n```\r\n2. 传节点名 + 属性对象 —— 判断该节点且属性为指定值\r\n```javascript\r\n<!-- heading.vue:94  标题且层级为 level -->\r\nconst heading = (level) => editor.value?.isActive('heading', { level })\r\n\r\n<!-- line-height.vue:25-26  段落/标题且行高为 item.value -->\r\neditor.value?.isActive('paragraph', { lineHeight: item.value }) ||\r\neditor.value?.isActive('heading', { lineHeight: item.value })\r\n```\r\n3. 传标记名 + 属性对象 —— 判断自定义标记的某个属性值\r\n```javascript\r\n<!-- float-left.vue:5  自定义 float 标记 -->\r\n:menu-active=\"editor?.isActive('float', { float: 'left' })\"\r\n\r\n<!-- nowrap.vue:5  自定义 nowrap 标记 -->\r\n:menu-active=\"editor?.isActive('nowrap', { 'white-space': 'nowrap' })\"\r\n\r\n<!-- circle-text.vue:8  自定义 circleStyle 标记 -->\r\neditor?.isActive('circleStyle', { style: circleStyle })\r\n```\r\n4. 只传属性对象 —— 不指定类型，让 Tiptap 遍历所有节点/标记，任一命中该属性即激活\r\n```javascript\r\n<!-- align-left.vue:8-9  文本对齐或块对齐任一命中 -->\r\neditor?.isActive({ textAlign: 'left' }) ||\r\neditor?.isActive({ nodeAlign: 'flex-start' })\r\n\r\n<!-- word-wrap.vue:24  自动换行属性 -->\r\nactive: editor.value?.isActive({ wordWrap: 'normal' })\r\n\r\n<!-- writing-mode.vue:19  文字方向 -->\r\nactive: editor.value?.isActive({ writingMode: 'horizontal-tb' })\r\n```\r\n典型配套用法\r\n\r\nisActive 通常和另外两个方法成对出现，构成菜单按钮的状态 + 可用性 + 动作三件套（见 bold.vue）：\r\n\r\n┌──────────────────────────────────────────────────┬─────────────────────────────────────┐\r\n│                       方法                       │                作用                 │\r\n├──────────────────────────────────────────────────┼─────────────────────────────────────┤\r\n│ editor?.isActive('bold')                         │ 高亮当前按钮（:menu-active）        │\r\n├──────────────────────────────────────────────────┼─────────────────────────────────────┤\r\n│ editor?.can().chain().focus().toggleBold().run() │ 预判该命令此刻能否执行（:disabled） │\r\n├──────────────────────────────────────────────────┼─────────────────────────────────────┤\r\n│ editor?.chain().focus().toggleBold().run()       │ 点击时真正执行命令（@menu-click）   │\r\n└──────────────────────────────────────────────────┴─────────────────────────────────────┘","readmeFilename":"README.md"}