0

我需要有关 editor.js 的帮助

想象一下下面的场景，在我的页面上，我在右侧有 editor.js，在屏幕右侧有一堆按钮。

按钮是短语的集合，当点击它时，短语必须插入到 editor.js

但是，它必须在失去焦点之前插入光标所在的位置，考虑到它在 editor.js 中的任何位置，例如，可以在第一个、第二个或最后一个块中，并且在特定块内，光标可以在句子的开头、中间或结尾。

如何检索块和光标位置以插入新短语？

提前致谢

4

2 回答 2

1

您可以尝试使用以下将光标设置回之前的位置。但是，如果您的块中有嵌套元素，这将无法正常工作。

editor.caret.setToBlock(/* current block index */, null, /* last cursor position */)

要获取最后一个光标位置：

let selection = document.getSelection();
let cursorPosition = selection.anchorOffset;

获取当前块索引：

let currentBlockIndex = editor.blocks.getCurrentBlockIndex()

其中 editor 是您创建的editor.js实例。

参考：https ://editorjs.io/caret#settoblock

于 2020-10-08T11:36:42.543 回答
0

我需要一个类似的功能，所以我使用 reactjs 执行了以下操作来实现它。

创建的 ref 将保存当前索引 const currentBlockIndexRef = useRef('')

如何获取当前索引。

要获取当前索引，使用 api。当您单击用户想要添加内容的编辑器时，可以使用 Onchange(api) ，它将包含与用户想要添加内容的位置对应的当前块索引。如下所示。

 const editor = new EditorJS({
     holder: editorId,
     logLevel: "ERROR",
     data: initData,
     onReady: () => {
       ejInstance.current = editor;
     },
     onChange: function(api, block) {
           console.log('api', api.blocks.getCurrentBlockIndex())
           currentBlockIndexRef.current= api.blocks.getCurrentBlockIndex() // update ref with the current index
         editor.save().then((data) => {
 
          setEditorData({ ...editorData,data,});
         })
       
     },
     autofocus: true,
     readOnly: false,
     tools: editorTools
   });
   editorJs = editor
 };
``` 

Then you can insert the block at the index 


 editorJs.blocks.insert('image', {...data.data},'',currentBlockIndexRef.current) // update the block
于 2021-08-01T10:00:45.857 回答