强大而灵活的富文本编辑器:Tiptap Editor

强大而灵活的富文本编辑器:Tiptap Editor

项目地址:https://gitcode.com/gh_mirrors/tip/tiptap

Tiptap Editor 是一个基于 ProseMirror 库构建的无头、框架无关的富文本编辑器,它的设计理念是可定制化和扩展性。所谓“无头”,意味着它不自带预设的用户界面,给予设计者充分的自由度来塑造自己的编辑体验(可以参考下面提供的 UI 模板)。Tiptap 还与开源后台 Hocuspocus 配合,共同构成了功能全面的 Tiptap Suite

编辑器工作原理

  • 无头框架:Tiptap 不依赖特定界面,无需覆盖类或进行代码调试。如果需要 UI 示例,可以浏览我们的 模板示例
  • 框架无关:无论你使用 Vue, React 或纯 JavaScript,Tiptap 都能无缝集成,不受框架限制。
  • 扩展机制:通过扩展,你可以打造个性化的编辑体验,从基础的文字样式到高级特性如拖放块编辑。在 文档社区 中,你可以找到超过100个可用扩展以增强编辑器功能。
  • 自定义UX:你可以定义自己的 扩展节点,完全控制用户体验。

编辑器 Pro 扩展

Pro Extensions 是一系列提高 Tiptap 功能的高级工具,包括协同编辑,允许多个用户同步编辑文档,以及文件拖放管理等。详细了解这些特性,请访问 此处。Pro Extensions 可在创建 Tiptap 账户 后免费获取,并在账户指南中找到安装说明。

协作编辑解决方案

对于希望实现协同编辑的开发者,我们推荐使用 Hocuspocus——一个围绕 Yjs 的 CRDT 功能构建的合作后端。它是 Tiptap Suite 的重要组成部分。

文档与资源

查看我们的 文档 获取详细信息,如果你遇到问题或者有任何建议,请打开问题单。

演示与 CodeSandbox

关于 Tiptap

Tiptap 是一组基于开放源代码技术的开发组件,是我们的付费高级特性的基石,包括开放源代码编辑器组件、协作特性、内容AI和Tiptap云服务。我们在持续改进开源产品的同时,确保每个更新的质量和可靠性。

更多信息,请访问 Tiptap 文档官方网站

社区参与

GitHub 讨论区 上寻求帮助,分享最佳实践,或进行其他有讨论价值的话题交流。

赞助商

感谢以下赞助商对 Tiptap 的支持:

感谢所有个人和组织对 Tiptap 的贡献和支持!

最后,如果你有创意想为 Tiptap Editor Core 增添亮点,欢迎遵循我们的 CONTRIBUTING 指南参与贡献。

许可证

该项目遵守 MIT 许可证。更多详情请参阅 许可文件

tiptap tiptap 项目地址: https://gitcode.com/gh_mirrors/tip/tiptap

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

### 如何使用 React Tiptap 实现出 Word 文档 为了实现在 React 中利用 Tiptap 导出 Word 文档,可以采用将编辑器的内容转换成 HTML 字符串再进一步处理的方式。Tiptap 是基于 ProseMirror 的所见即所得富文本编辑框架,提供了丰富的 API 和插件支持。 #### 安装依赖库 首先,在项目中安装 `react-tiptap` 及其相关依赖项: ```bash npm install @tiptap/react @tiptap/starter-kit ``` 另外还需要引入用于导出功能的相关包来帮助完成文件生成工作: ```bash npm install file-saver html-docx-js ``` #### 创建 Tiptap 编辑器并添加导出按钮 创建一个新的组件用来承载 Tiptap 编辑器实例以及提供给用户的操作界面,其中包括一个触发导出行为的按钮。 ```jsx import { Editor, EditorContent } from '@tiptap/react' import StarterKit from '@tiptap/starter-kit' import { useState } from 'react' function MyEditor() { const [editor] = useState(() => new Editor({ extensions: [ StarterKit, ], })) function handleExportToWord() { if (!editor) return // 获取当前编辑器中的HTML内容 const contentHtml = editor.getHTML() // 使用html-docx-js将HTML转为Word文档 var doc = new window.HTMLDocXJS.DocxGen(); doc.loadFromStr(contentHtml); let blob = doc.generate({ type: "blob" }); // 利用FileSaver保存文件到本地 saveAs(blob, "demo_word.docx"); } return ( <> <button onClick={handleExportToWord}>导出为Word</button> <EditorContent editor={editor} /> </> ) } export default MyEditor; ``` 此部分实现了基本的功能逻辑:当点击“导出为Word”的时候会调用 `handleExportToWord()` 方法获取编辑区内的 HTML 并将其转化为 .docx 文件下载下来[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柯兰妃Jimmy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值