{"id":18982529,"url":"https://github.com/kid-1912/tiptap-appmsg-editor","last_synced_at":"2025-08-14T18:39:45.401Z","repository":{"id":209837806,"uuid":"724093167","full_name":"KID-1912/tiptap-appmsg-editor","owner":"KID-1912","description":"基于 tiptap 搭建的微信公众号编辑器示例，支持排版后复制到微信公众平台，支持开发者自己开发样式库、模板库作为内容插入；如 135Editor、壹伴等；Based on tiptap built WeChat public number editor example, support layout after copying to the WeChat public platform, support developers to develop their own style library, template library as content insertion;","archived":false,"fork":false,"pushed_at":"2025-01-09T06:27:54.000Z","size":942,"stargazers_count":73,"open_issues_count":2,"forks_count":13,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-27T01:41:20.611Z","etag":null,"topics":["appmsg","editor","tiptap","wechat"],"latest_commit_sha":null,"homepage":"https://tiptap-appmsg-editor.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KID-1912.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-11-27T11:37:12.000Z","updated_at":"2025-05-15T22:50:15.000Z","dependencies_parsed_at":"2023-12-24T14:29:46.611Z","dependency_job_id":"b1f085b6-8635-4c1f-b924-ec8908ca026b","html_url":"https://github.com/KID-1912/tiptap-appmsg-editor","commit_stats":null,"previous_names":["kid-1912/tiptap-appmsg-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KID-1912/tiptap-appmsg-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KID-1912%2Ftiptap-appmsg-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KID-1912%2Ftiptap-appmsg-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KID-1912%2Ftiptap-appmsg-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KID-1912%2Ftiptap-appmsg-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KID-1912","download_url":"https://codeload.github.com/KID-1912/tiptap-appmsg-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KID-1912%2Ftiptap-appmsg-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270466390,"owners_count":24588791,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appmsg","editor","tiptap","wechat"],"created_at":"2024-11-08T16:13:51.127Z","updated_at":"2025-08-14T18:39:45.377Z","avatar_url":"https://github.com/KID-1912.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tiptap-appmsg-editor\n\n\u003ch3 align=\"center\"\u003e\n    基于 tiptap 搭建的微信公众号编辑器示例，支持排版后复制到微信公众平台，支持开发者自己开发样式库、模板库作为内容插入；如 135Editor、壹伴等\n\u003c/h3\u003e\n\n[在线示例](https://kid-1912.github.io/tiptap-appmsg-editor/index.html)\n\n**vite+vue3 版本**\n\n[vue-tiptap-appmsg-editor](https://github.com/KID-1912/vue-tiptap-appmsg-editor)\n\n\u003cbr/\u003e\n\n[![](https://raw.githubusercontent.com/KID-1912/Github-PicGo-Images/master/2024/02/18/20240218183840.png)](https://kid-1912.github.io/tiptap-appmsg-editor/index.html)\n\n\u003cbr/\u003e\n\n---\n\n## 功能点罗列\n\n- 文字样式（字号、颜色、高亮、加粗、行高...）\n\n- 清除文字样式\n\n- 内容排版（对齐、间距、缩进、浮动）\n\n- 历史记录撤销/重做\n\n- 图片插入\n\n- 代码块内容\n\n- 视频内容\n\n- 分割线\n\n- 有序/无序列表\n\n- 超链接\n\n- 图片超链接\n\n- 微信小程序\n\n- 表情插入\n\n- 图文样式库开发规范\n\n- 插入图文样式与模板\n\n- 一键复制使用\n\n- 字数统计\n\n持续更新...\n\n## 文件目录\n\n```\ntiptap-appmsg-editor\\src\n├─js\n| ├─editor.js // tiptap编辑器实例\n| ├─function.js // 编辑器功能实现\n| ├─sidebar.js // 侧边栏实现\n| ├─svg.js // svg图标插入\n| ├─toolbar.js // 工具栏实现\n├─images\n|   ├─svg\n|   ├─sprite\n|   |   └emoji_sprite.png // 表情雪碧图\n|   ├─icon\n|   |  ├─icon-image-link.png // 图片超链接标识图\n|   |  └icon-weapp-link.png // 小程序标识图\n├─main.js\n├─templates // 样式组件和内容模板\n├─styles\n|   ├─base.css\n|   ├─editor.css  // 编辑器默认样式\n|   ├─index.css // 页面主样式\n|   └reset.css\n├─plugins\n|    ├─tabs // tab实现\n|    ├─modal // 弹窗实现\n|    ├─dropdown // 下拉菜单实现\n|    ├─clickoutside // 点击外部关闭实现\n```\n\n## 自定义编辑器\n\n基于本示例开发自定义样式的编辑器，需要注意内容样式\n\n由于文章内容默认样式存在，为了预览效果一致性，需要在 tiptap 编辑区与侧边栏保证以下样式存在\n\n```css\n.tiptap.ProseMirror {\n  min-height: 960px;\n  outline: none;\n  color: rgba(0, 0, 0, 0.9);\n  font-size: 17px;\n  line-height: 1.6;\n  text-align: justify;\n}\n\n.ProseMirror * {\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box !important;\n  word-wrap: break-word !important;\n}\n\n.ProseMirror p {\n  clear: both;\n  min-height: 1em;\n}\n\n.ProseMirror \u003e p {\n  margin-top: 0;\n  margin-bottom: 24px;\n}\n```\n\n更多内容类的样式，可见公众号内容默认样式文件：`src/styles/editor.css`\n\n### 样式组件开发\n\n对于可用的、灵活的、自适应组件，需要你按照一定的规范开发\n\n**核心标签**\n\nsection：组件内容容器，允许 style 所有样式值\n\np：文字段落，仅允许 text-align 等段落样式，若文字内容未包含于 p 标签，则解析后自动追加\n\nspan：文字样式容器，仅允许 color、font-size、font-family 等文字样式\n\nimg：图片元素，允许 style 所有样式值\n\n**标记标签**\n\n以下标签为 tiptap 标记样式的 node，在插入内容被解析后自动追加，无需额外关注\n\n如插入内容\n\n```html\n\u003csection style=\"color: grey; text-decoration: underline\"\u003e\n  \u003cp\u003e\n    \u003cspan style=\"font-size: 12px\"\u003eCOMPANY BROCHURE\u003c/span\u003e\n  \u003c/p\u003e\n\u003c/section\u003e\n```\n\n实际插入结果\n\n```html\n\u003csection style=\"color: grey; text-decoration: underline\"\u003e\n  \u003cp\u003e\n    \u003cu\u003e\n      \u003cspan style=\"font-size: 12px\"\u003eCOMPANY BROCHURE\u003c/span\u003e\n    \u003c/u\u003e\n  \u003c/p\u003e\n\u003c/section\u003e\n```\n\nstrong：加粗 node\n\nem：斜体 node\n\nu：下划线 node\n\n**更合理的组件建议**\n\n内容块(section)之间距离：推荐 margin-top/margin-bottom 边距（段前距/段后距）\n\n文字行距离：推荐 line-height 行高（行间距）\n\n使用 em 单位替代 px 单位，如 line-height 值，更加灵活自适应\n\n使用 br 实现段落内文字手动换行\n\n**借鉴样式**\n\n可以参考其他公众号编辑平台的样式，如 135Editor、壹伴等\n\n壹伴公众号样式平台：https://yiban.io/style_center/0_1_0\n\n**Relations**\n\n[tiptap documentation](https://tiptap.dev/docs/editor/introduction)\n\n[tiptap-extension-resizable](https://github.com/KID-1912/tiptap-extension-resizable)\n\n[tiptap-extension-image](https://github.com/KID-1912/tiptap-extension-image)\n\n[tiptap-extension-video](https://github.com/KID-1912/tiptap-extension-video)\n\n[tiptap-extension-iframe](https://github.com/KID-1912/tiptap-extension-iframe)\n\n[tiptap-extension-font-size](https://github.com/KID-1912/tiptap-extension-font-size)\n\n[tiptap-extension-link](https://github.com/KID-1912/tiptap-extension-link)\n\n[tiptap-extension-trailing-node](https://github.com/KID-1912/tiptap-extension-trailing-node)\n\n[tiptap-extension-image-link](https://github.com/KID-1912/tiptap-extension-image-link)\n\n[tiptap-extension-bullet-list](https://github.com/KID-1912/tiptap-extension-bullet-list)\n\n[tiptap-extension-ordered-list](https://github.com/KID-1912/tiptap-extension-ordered-list)\n\n[tiptap-extension-line-height](https://github.com/KID-1912/tiptap-extension-line-height)\n\n[tiptap-extension-float](https://github.com/KID-1912/tiptap-extension-float)\n\n[tiptap-extension-margin](https://github.com/KID-1912/tiptap-extension-margin)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkid-1912%2Ftiptap-appmsg-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkid-1912%2Ftiptap-appmsg-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkid-1912%2Ftiptap-appmsg-editor/lists"}