{"_id":"@aleatx/tiptap-editor","_rev":"4-7dfbb1ee325ee1300eac01de0430d707","name":"@aleatx/tiptap-editor","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@aleatx/tiptap-editor","version":"1.0.0","keywords":["vue","vue3","tiptap","editor","rich-text","wysiwyg","component"],"_id":"@aleatx/tiptap-editor@1.0.0","maintainers":[{"name":"aleatx","email":"1130720798@qq.com"}],"dist":{"shasum":"1a4c3a3218e806041091e2ef73e9ae4701625170","tarball":"https://registry.npmjs.org/@aleatx/tiptap-editor/-/tiptap-editor-1.0.0.tgz","fileCount":6,"integrity":"sha512-yBEYihiN1WhFZtrk0sgdJVZ6bTW4JQAyJoataGLBfHIYx7dxbIUKOm869FiYO4dqgM7pVrkJjHW7KKDmrtt3wg==","signatures":[{"sig":"MEUCIAhcGzHvq87g79qvY52obrhu3si4e4JsvFFjkkr1pp8KAiEAi7Fz1GF71WX6W5WynCFxr/ZHKkn0F1ef6+PKetiXydc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23486},"main":"./dist/tiptap-editor.umd.cjs","type":"module","types":"./dist/types/lib/index.d.ts","module":"./dist/tiptap-editor.js","exports":{".":{"types":"./dist/types/lib/index.d.ts","import":"./dist/tiptap-editor.js","require":"./dist/tiptap-editor.umd.cjs"}},"private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview","build:lib":"vue-tsc -b && vite build --mode lib"},"_npmUser":{"name":"aleatx","email":"1130720798@qq.com"},"_npmVersion":"10.8.2","description":"A Vue 3 rich text editor component based on Tiptap with a user-friendly toolbar","directories":{},"_nodeVersion":"22.7.0","dependencies":{"vue":"^3.5.13","@tiptap/pm":"^2.11.5","@tiptap/vue-3":"^2.11.5","@tiptap/starter-kit":"^2.11.5","@tiptap/extension-link":"^2.11.5","@tiptap/extension-color":"^2.11.5","@tiptap/extension-image":"^2.11.5","@fontsource/material-icons":"^5.2.5","@tiptap/extension-highlight":"^2.11.5","@tiptap/extension-underline":"^2.11.5","@tiptap/extension-text-align":"^2.11.5","@tiptap/extension-placeholder":"^2.11.5"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.0","vue-tsc":"^2.2.4","typescript":"~5.7.2","@types/node":"^22.13.9","@vue/tsconfig":"^0.7.0","vite-plugin-dts":"^4.5.3","@vitejs/plugin-vue":"^5.2.1"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-editor_1.0.0_1741358763890_0.6304144344369897","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aleatx/tiptap-editor","version":"1.0.1","keywords":["vue","vue3","tiptap","editor","rich-text","wysiwyg","component"],"_id":"@aleatx/tiptap-editor@1.0.1","maintainers":[{"name":"aleatx","email":"1130720798@qq.com"}],"dist":{"shasum":"ee11b2ba361ced7feda83d6380cf38e60f15ccef","tarball":"https://registry.npmjs.org/@aleatx/tiptap-editor/-/tiptap-editor-1.0.1.tgz","fileCount":6,"integrity":"sha512-n6Q8aaYhJmPrkMPeIZVmRBFmt1gc/MZ23DIFGAzUCzLPq7mwXhoK+pwoj9BTqi09dqLhx6C4XX16Jm/x+OhE/A==","signatures":[{"sig":"MEYCIQC8sfCQHdb1X9BzQf0gN8SFyhYWPg1M2LG8iXXevopqnQIhAM4wwYNDO31r0/YUvorRSZ6f2RoMtjHD4qvSmFeSGdAL","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":333097},"main":"./dist/tiptap-editor.umd.cjs","type":"module","types":"./dist/types/lib/index.d.ts","module":"./dist/tiptap-editor.js","exports":{".":{"types":"./dist/types/lib/index.d.ts","import":"./dist/tiptap-editor.js","require":"./dist/tiptap-editor.umd.cjs"}},"private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview","build:lib":"vue-tsc -b && vite build --mode lib"},"_npmUser":{"name":"aleatx","email":"1130720798@qq.com"},"_npmVersion":"10.8.2","description":"A Vue 3 rich text editor component based on Tiptap with a user-friendly toolbar","directories":{},"_nodeVersion":"22.7.0","dependencies":{"vue":"^3.5.13","@tiptap/pm":"^2.11.5","@tiptap/vue-3":"^2.11.5","@tiptap/starter-kit":"^2.11.5","@tiptap/extension-link":"^2.11.5","@tiptap/extension-color":"^2.11.5","@tiptap/extension-image":"^2.11.5","@fontsource/material-icons":"^5.2.5","@tiptap/extension-highlight":"^2.11.5","@tiptap/extension-underline":"^2.11.5","@tiptap/extension-text-align":"^2.11.5","@tiptap/extension-placeholder":"^2.11.5"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.0","vue-tsc":"^2.2.4","typescript":"~5.7.2","@types/node":"^22.13.9","@vue/tsconfig":"^0.7.0","vite-plugin-dts":"^4.5.3","@vitejs/plugin-vue":"^5.2.1"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-editor_1.0.1_1741365895376_0.7337951204410404","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aleatx/tiptap-editor","version":"1.0.2","keywords":["vue","vue3","tiptap","editor","rich-text","wysiwyg","component"],"_id":"@aleatx/tiptap-editor@1.0.2","maintainers":[{"name":"aleatx","email":"1130720798@qq.com"}],"dist":{"shasum":"9bf2030241e16a680d0ab753d43f1f4a61f2bd36","tarball":"https://registry.npmjs.org/@aleatx/tiptap-editor/-/tiptap-editor-1.0.2.tgz","fileCount":6,"integrity":"sha512-LZCNWRz1Np18MZCScv84c6hlgjbWaFoOkKHd5TGHf8IMeuW7VSDP1JCjgphR1MnvwVhzhOOReBAFJCRUCI8fAw==","signatures":[{"sig":"MEUCIQClyLONRwpYry7+1qq7snXI/5CvZQU76nrAoXf/CF0q4QIgUgf2cIUAHK4Cjvp7Cu4dCJCZ8FcAUPWMOnlx5m2YoMQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":337909},"main":"./dist/tiptap-editor.umd.cjs","type":"module","types":"./dist/types/lib/index.d.ts","module":"./dist/tiptap-editor.js","exports":{".":{"types":"./dist/types/lib/index.d.ts","import":"./dist/tiptap-editor.js","require":"./dist/tiptap-editor.umd.cjs"}},"private":false,"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview","build:lib":"vue-tsc -b && vite build --mode lib"},"_npmUser":{"name":"aleatx","email":"1130720798@qq.com"},"_npmVersion":"10.8.2","description":"A Vue 3 rich text editor component based on Tiptap with a user-friendly toolbar","directories":{},"_nodeVersion":"22.7.0","dependencies":{"vue":"^3.5.13","@tiptap/pm":"^2.11.5","@tiptap/vue-3":"^2.11.5","@tiptap/starter-kit":"^2.11.5","@tiptap/extension-link":"^2.11.5","@tiptap/extension-color":"^2.11.5","@tiptap/extension-image":"^2.11.5","@fontsource/material-icons":"^5.2.5","@tiptap/extension-highlight":"^2.11.5","@tiptap/extension-underline":"^2.11.5","@tiptap/extension-text-align":"^2.11.5","@tiptap/extension-placeholder":"^2.11.5"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.0","vue-tsc":"^2.2.4","typescript":"~5.7.2","@types/node":"^22.13.9","@vue/tsconfig":"^0.7.0","vite-plugin-dts":"^4.5.3","@vitejs/plugin-vue":"^5.2.1"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-editor_1.0.2_1741366133167_0.9610928180234897","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aleatx/tiptap-editor","private":false,"version":"1.0.3","type":"module","description":"A Vue 3 rich text editor component based on Tiptap with a user-friendly toolbar","keywords":["vue","vue3","tiptap","editor","rich-text","wysiwyg","component"],"main":"./dist/tiptap-editor.umd.cjs","module":"./dist/tiptap-editor.js","types":"./dist/types/lib/index.d.ts","exports":{".":{"import":"./dist/tiptap-editor.js","require":"./dist/tiptap-editor.umd.cjs","types":"./dist/types/lib/index.d.ts"}},"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview","build:lib":"vue-tsc -b && vite build --mode lib"},"dependencies":{"@fontsource/material-icons":"^5.2.5","@tiptap/extension-color":"^2.11.5","@tiptap/extension-highlight":"^2.11.5","@tiptap/extension-image":"^2.11.5","@tiptap/extension-link":"^2.11.5","@tiptap/extension-placeholder":"^2.11.5","@tiptap/extension-text-align":"^2.11.5","@tiptap/extension-underline":"^2.11.5","@tiptap/pm":"^2.11.5","@tiptap/starter-kit":"^2.11.5","@tiptap/vue-3":"^2.11.5","vue":"^3.5.13"},"devDependencies":{"@types/node":"^22.13.9","@vitejs/plugin-vue":"^5.2.1","@vue/tsconfig":"^0.7.0","typescript":"~5.7.2","vite":"^6.2.0","vite-plugin-dts":"^4.5.3","vue-tsc":"^2.2.4"},"_id":"@aleatx/tiptap-editor@1.0.3","_nodeVersion":"22.7.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-kuew9wX2T1GrOxE+gXb4ewcRR0cI7VNMeJiMia4ulpI5+Rsh4aRhLZeBQf3AP6IT7M1JWlG5BmUJaeOLobD6RA==","shasum":"cf3eedac40b6dc0ff31f56c47d9cccd904f82957","tarball":"https://registry.npmjs.org/@aleatx/tiptap-editor/-/tiptap-editor-1.0.3.tgz","fileCount":6,"unpackedSize":342670,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEx7p0BNqOEmrD+8nXNXeoLUb0eQTKucACJV4tXdDxS+AiBwHmZJk4oQEoscH6f6CdoWtXzLciDD5/fiOMllefdfVQ=="}]},"_npmUser":{"name":"aleatx","email":"1130720798@qq.com"},"directories":{},"maintainers":[{"name":"aleatx","email":"1130720798@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tiptap-editor_1.0.3_1741402647338_0.05674591126908135"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-07T14:46:03.822Z","modified":"2025-03-08T02:57:27.693Z","1.0.0":"2025-03-07T14:46:04.079Z","1.0.1":"2025-03-07T16:44:55.597Z","1.0.2":"2025-03-07T16:48:53.374Z","1.0.3":"2025-03-08T02:57:27.522Z"},"keywords":["vue","vue3","tiptap","editor","rich-text","wysiwyg","component"],"description":"A Vue 3 rich text editor component based on Tiptap with a user-friendly toolbar","maintainers":[{"name":"aleatx","email":"1130720798@qq.com"}],"readme":"# @xlatex/tiptap-editor\n\n一个基于 Tiptap 的 Vue 3 富文本编辑器组件，提供了用户友好的工具栏和丰富的编辑功能。\n\n## 特性\n\n- 基于 Vue 3 和 TypeScript 开发\n- 使用 Tiptap 作为编辑器核心\n- 内置常用的编辑功能：加粗、斜体、下划线、文本颜色、高亮等\n- 支持图片上传和链接插入\n- 文本对齐和格式化功能\n- 响应式设计，支持移动端\n\n## 安装\n\n```bash\nnpm install @xlatex/tiptap-editor\n```\n\n## 使用方法\n\n```vue\n<template>\n  <div>\n    <rich-text-editor\n      v-model=\"content\"\n      placeholder=\"请输入内容...\"\n      @change=\"handleChange\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { RichTextEditor } from '@zhangsheng/tiptap-editor'\n\nconst content = ref('')\n\nconst handleChange = (html: string) => {\n  console.log('编辑器内容已更新:', html)\n}\n</script>\n```\n\n## 组件 Props\n\n| 属性名 | 类型 | 默认值 | 说明 |\n|--------|------|--------|------|\n| modelValue | string | '' | 编辑器的内容，支持 v-model 双向绑定 |\n| placeholder | string | '请输入内容...' | 编辑器占位文本 |\n\n## 事件\n\n| 事件名 | 参数 | 说明 |\n|--------|------|------|\n| update:modelValue | (value: string) | 编辑器内容更新时触发 |\n| change | (html: string, editor: Editor) | 编辑器内容变化时触发，提供更新后的 HTML 内容和编辑器实例 |\n\n## 工具栏按钮\n\n编辑器工具栏提供了丰富的文本编辑功能，以下是各个按钮的功能说明：\n\n### 文本格式化\n\n| 按钮 | 功能 | 使用方法 | API调用 |\n|------|------|----------|--------|\n| 加粗 | 将选中文本设置为粗体 | 选中文本，点击加粗按钮 | `editor.commands.toggleBold()` |\n| 斜体 | 将选中文本设置为斜体 | 选中文本，点击斜体按钮 | `editor.commands.toggleItalic()` |\n| 下划线 | 为选中文本添加下划线 | 选中文本，点击下划线按钮 | `editor.commands.toggleUnderline()` |\n| 删除线 | 为选中文本添加删除线 | 选中文本，点击删除线按钮 | `editor.commands.toggleStrike()` |\n\n#### 代码示例\n\n```vue\n<script setup>\nimport { useEditor } from '@tiptap/vue-3'\nimport StarterKit from '@tiptap/starter-kit'\nimport Underline from '@tiptap/extension-underline'\nimport Strike from '@tiptap/extension-strike'\n\nconst editor = useEditor({\n  extensions: [\n    StarterKit,\n    Underline,\n    Strike,\n  ],\n  content: '<p>选中这段文本应用格式</p>',\n})\n\n// 应用加粗格式\nconst applyBold = () => {\n  editor.value.commands.toggleBold()\n}\n\n// 应用斜体格式\nconst applyItalic = () => {\n  editor.value.commands.toggleItalic()\n}\n\n// 应用下划线格式\nconst applyUnderline = () => {\n  editor.value.commands.toggleUnderline()\n}\n\n// 应用删除线格式\nconst applyStrike = () => {\n  editor.value.commands.toggleStrike()\n}\n</script>\n```\n\n### 标题设置\n\n| 按钮 | 功能 | 使用方法 | API调用 |\n|------|------|----------|--------|\n| 标题1 | 将文本设置为一级标题 | 将光标放在段落中，点击标题1按钮 | `editor.commands.toggleHeading({ level: 1 })` |\n| 标题2 | 将文本设置为二级标题 | 将光标放在段落中，点击标题2按钮 | `editor.commands.toggleHeading({ level: 2 })` |\n| 标题3 | 将文本设置为三级标题 | 将光标放在段落中，点击标题3按钮 | `editor.commands.toggleHeading({ level: 3 })` |\n\n#### 代码示例\n\n```vue\n<script setup>\nimport { useEditor } from '@tiptap/vue-3'\nimport StarterKit from '@tiptap/starter-kit'\n\nconst editor = useEditor({\n  extensions: [\n    StarterKit,\n  ],\n  content: '<p>这是一个普通段落</p>',\n})\n\n// 设置一级标题\nconst setHeading1 = () => {\n  editor.value.commands.toggleHeading({ level: 1 })\n}\n\n// 设置二级标题\nconst setHeading2 = () => {\n  editor.value.commands.toggleHeading({ level: 2 })\n}\n\n// 设置三级标题\nconst setHeading3 = () => {\n  editor.value.commands.toggleHeading({ level: 3 })\n}\n\n// 恢复为普通段落\nconst setParagraph = () => {\n  editor.value.commands.setParagraph()\n}\n</script>\n```\n\n### 列表\n\n| 按钮 | 功能 | 使用方法 | API调用 |\n|------|------|----------|--------|\n| 无序列表 | 创建无序列表 | 将光标放在段落中，点击无序列表按钮 | `editor.commands.toggleBulletList()` |\n| 有序列表 | 创建有序列表 | 将光标放在段落中，点击有序列表按钮 | `editor.commands.toggleOrderedList()` |\n\n#### 代码示例\n\n```vue\n<script setup>\nimport { useEditor } from '@tiptap/vue-3'\nimport StarterKit from '@tiptap/starter-kit'\n\nconst editor = useEditor({\n  extensions: [\n    StarterKit,\n  ],\n  content: '<p>这是一个普通段落</p>',\n})\n\n// 切换无序列表\nconst toggleBulletList = () => {\n  editor.value.commands.toggleBulletList()\n}\n\n// 切换有序列表\nconst toggleOrderedList = () => {\n  editor.value.commands.toggleOrderedList()\n}\n\n// 增加列表缩进\nconst increaseIndent = () => {\n  editor.value.commands.sinkListItem('listItem')\n}\n\n// 减少列表缩进\nconst decreaseIndent = () => {\n  editor.value.commands.liftListItem('listItem')\n}\n</script>\n```\n\n### 文本对齐\n\n| 按钮 | 功能 | 使用方法 | API调用 |\n|------|------|----------|--------|\n| 左对齐 | 将文本左对齐 | 将光标放在段落中，点击左对齐按钮 | `editor.commands.setTextAlign('left')` |\n| 居中对齐 | 将文本居中对齐 | 将光标放在段落中，点击居中对齐按钮 | `editor.commands.setTextAlign('center')` |\n| 右对齐 | 将文本右对齐 | 将光标放在段落中，点击右对齐按钮 | `editor.commands.setTextAlign('right')` |\n\n#### 代码示例\n\n```vue\n<script setup>\nimport { useEditor } from '@tiptap/vue-3'\nimport StarterKit from '@tiptap/starter-kit'\nimport TextAlign from '@tiptap/extension-text-align'\n\nconst editor = useEditor({\n  extensions: [\n    StarterKit,\n    TextAlign.configure({\n      types: ['heading', 'paragraph'],\n      alignments: ['left', 'center', 'right'],\n      defaultAlignment: 'left',\n    }),\n  ],\n  content: '<p>这是一个普通段落</p>',\n})\n\n// 设置左对齐\nconst setLeftAlign = () => {\n  editor.value.commands.setTextAlign('left')\n}\n\n// 设置居中对齐\nconst setCenterAlign = () => {\n  editor.value.commands.setTextAlign('center')\n}\n\n// 设置右对齐\nconst setRightAlign = () => {\n  editor.value.commands.setTextAlign('right')\n}\n\n// 取消文本对齐设置\nconst unsetTextAlign = () => {\n  editor.value.commands.unsetTextAlign()\n}\n</script>\n```\n\n### 插入元素\n\n| 按钮 | 功能 | 使用方法 | API调用 |\n|------|------|----------|--------|\n| 插入链接 | 为选中文本添加超链接 | 选中文本，点击链接按钮，在弹出的对话框中输入URL | `editor.commands.setLink({ href: 'https://example.com' })` |\n| 插入图片 | 在光标位置插入图片 | 点击图片按钮，在弹出的对话框中输入图片URL | `editor.commands.setImage({ src: 'image-url.jpg' })` |\n| 插入下拉选择 | 在光标位置插入下拉选择框 | 点击下拉选择按钮，插入默认的下拉选择框 | `editor.commands.setSelectNode()` |\n| 插入输入标签 | 在光标位置插入输入标签 | 点击输入标签按钮，插入默认的输入标签 | `editor.commands.setInputLabel({ placeholder: '请输入文本...' })` |\n\n#### 代码示例\n\n```vue\n<script setup>\nimport { useEditor } from '@tiptap/vue-3'\nimport StarterKit from '@tiptap/starter-kit'\nimport Link from '@tiptap/extension-link'\nimport Image from '@tiptap/extension-image'\nimport { SelectNode } from './lib/extensions/nodes/select-node/SelectNode'\n\nconst editor = useEditor({\n  extensions: [\n    StarterKit,\n    Link.configure({\n      openOnClick: true,\n      linkOnPaste: true,\n    }),\n    Image,\n    SelectNode,\n  ],\n  content: '<p>这是一个普通段落</p>',\n})\n\n// 插入链接\nconst insertLink = () => {\n  const url = prompt('请输入链接URL')\n  if (url) {\n    editor.value.commands.setLink({ href: url })\n  }\n}\n\n// 插入图片\nconst insertImage = () => {\n  const url = prompt('请输入图片URL')\n  if (url) {\n    editor.value.commands.setImage({ src: url })\n  }\n}\n\n// 插入下拉选择框\nconst insertSelectNode = () => {\n  editor.value.commands.setSelectNode({\n    options: [\n      { value: 'option1', label: '选项1' },\n      { value: 'option2', label: '选项2' },\n      { value: 'option3', label: '选项3' },\n    ]\n  })\n}\n\n// 插入输入标签\nconst insertInputLabel = () => {\n  editor.value.commands.setInputLabel({\n    placeholder: '请输入文本...'\n  })\n}\n</script>\n```\n\n## 开发\n\n```bash\n# 安装依赖\nnpm install\n\n# 启动开发服务器\nnpm run dev\n\n# 构建库文件\nnpm run build:lib\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}