Draft.js 在放置位置插入图像答案

【问题标题】：Draft.js insert image at dropped positionDraft.js 在放置位置插入图像
【发布时间】：2019-11-11 20:57:08
【问题描述】：

我正在尝试从 Draft-js 编辑器外部删除图像，但它总是插入到编辑器中光标/选择的最后位置（如果未设置光标/选择，则插入到末尾）。

这是我对draft-js-drag-n-drop-plugin的总结

const droppableBlockDndPlugin = {
  ...blockDndPlugin,
  handleDrop: (
    selection,
    dataTransfer,
    isInternal,
    {getEditorState, setEditorState}
  ) => {
    const editorState = getEditorState();
    const raw = dataTransfer.data.getData('text');
    const data = raw ? raw.split(IMAGE_BLOCK_TYPE_SEPARATOR) : [];
    if (data.length > 1 && data[0] === IMAGE_BLOCK_TYPE_PURE) {
      const url = data[1];
      if (url) {
        const newState = imagePlugin.addImage(editorState, url);
        setEditorState(newState);
      }
    }

    return blockDndPlugin.handleDrop(selection, dataTransfer, isInternal, {
      getEditorState,
      setEditorState
    });
  }
};

基本上我只是在基础handleDrop 发生之前做额外的逻辑，我使用imagePlugin.addImage 插入图像。有没有办法将图像拖放到拖动位置？

【问题讨论】：

标签： drag-and-drop draftjs draft-js-plugins

【解决方案1】：

其实这是一个很明显的解决方案——你应该只使用传递的selection 并用它创建新状态，然后将图像添加到该新状态：

const newState = imagePlugin.addImage(EditorState.forceSelection(editorState, selection), url);
setEditorState(newState);

【讨论】：