使用 slatejs 在编辑器中的光标处插入图像答案

【问题标题】：Image insertion at cursor in editor using slatejs使用 slatejs 在编辑器中的光标处插入图像
【发布时间】：2019-03-05 15:07:23
【问题描述】：

我正在尝试使用 reactjs 和 slate.js 实现富文本编辑器。到目前为止，我能够使大多数功能正常工作，但是无法将图像添加到光标处的文档中不起作用（但是，在文档开头插入图像是有效的）。

当我试图将它插入任何其他点时，我都会收到错误。在渲染部分，即执行编辑器的onchange方法。

    const target = getEventRange(e, this.state.EditorComp.state.value)
change = this.state.EditorComp.state.value.change().call(this.insertImage, filelocation,target)
this.state.EditorComp.onChange(change);

slate-react.es.js:1229 Uncaught Error: Unable to find a DOM node for "51". This is often because of forgetting to add `props.attributes` to a custom component.
at findDOMNode$1 (slate-react.es.js:1229)
at findDOMPoint (slate-react.es.js:1247)
at findDOMRange (slate-react.es.js:1290)

我的代码基于链接https://github.com/ianstormtaylor/slate/blob/master/examples/images/index.js

请帮忙。

【问题讨论】：

标签： reactjs image insertion slatejs

【解决方案1】：

您是否为您的编辑器定义了schema？在我为将isVoid 设置为true 的图像添加架构之前，我遇到了同样的错误。您的架构中至少需要以下内容：

const schema = {
  blocks: {
    image: {
      isVoid: true
    }
  }
};

【讨论】：

【解决方案2】：

我想如果你想在光标处插入图像，你会想内联：

change.insertInline({
  type: 'img',
  isVoid: true,
  data: { location: location }
})
change.moveToStartOfNextText().focus()

然后在你的 renderNode 方法中：

const { attributes, node, isSelected } = props
if (node.type === 'img') { 
  node.data.get('location')
  return <img ... />
}

【讨论】：