TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
5.9k stars 384 forks source link

我如何在编辑器中上传图片和文件进行超链接点击图片实现自动跳转超链接功能? #819

Closed zhanghaidi closed 3 weeks ago

zhanghaidi commented 3 weeks ago

1、我如何在编辑器中上传的图片和文件进行绑定超链接功能?类似这样: image

2、我需要实现自定义显示出了多媒体以外的插入功能如:ifram网页,或者 code 和Excalidraw,这很实用,也很重要 image

image

matthewlipski commented 3 weeks ago
  1. You can either create your own custom image block and add an onClick listener there, or add a listener to the default image blocks whenever the editor updates (you can use editor.domElement.querySelector('[data-content-type="image"] img') to get all img elements inside image blocks).

  2. You will have to implement this yourself as a React component and add it as a child of BlockNoteView. The useEditorContentOrSelectionChange and useSelectedBlocks hooks will be useful to figure out when to show/hide your menu.