框架与类库:Tiptap
Tiptap 是一个基于ProseMirror 构建的富文本编辑器,它是一个灵活、可扩展的富文本编辑器,同时适用于Vue.js 和React。 所以,无论你的技术栈是Vue,还是React,使用Tiptap都不用太过于在选型上纠结。
Building an AI copilot inside your Tiptap text editor
AI深度集成文本编辑器的核心突破:
- 结构化协同:基于Tiptap编辑器,AI直接理解文档树而非孤立片段,支持跨段落重组与格式维护;
- 动态差异比对:独创混合差分算法,将文档扁平化为带元数据的符号流,实现语义级实时变更追踪;
- 无干扰协作:采用本地预览机制,用户可逐帧审核AI建议,接受后才会同步至共享文档;
- 流式响应优化:通过WebSocket持续输出分词结果,隐藏未完成片段,消除等待卡顿感。
本质是将AI转化为遵循严格Schema的"编辑伙伴",而非外挂工具。
从“截图大法”到真实交互:B站专栏视频卡的技术革命
B站富文本编辑器从Quill迁移到ProseMirror,彻底告别用Canvas伪造卡片的"截图大法"。新架构基于文档树模型,通过NodeView实现真实交互组件,支持视频卡等复杂节点的动态渲染。优化方案包含批量解析、三级缓存和播放器实例池,既保障插入速度又控制运行时性能。最终实现真正的所见即所得,为未来扩展互动组件打下基础。
How to upload or disable pasting images in Tiptap
Once you add the Image extension to the Tiptap WYSIWYG editor, users can paste images in from HTML and the clipboard. That may (or may not be) what you want to happen. Here's how I handled image…
Adding drag and drop image uploads to Tiptap
Need to be able to drag and drop image files into your Tiptap WYSIWYG editor? Tiptap is highly customisable, so let's add some drag-and-drop magic to the Image extension.
- «
- 1
- »