reactjs - 使用 slatejs 在编辑器中的光标处插入图像
问题描述
我正在尝试使用 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
请帮忙。
解决方案
你有为你的编辑器定义的模式吗?isVoid
在为设置为 true的图像添加架构之前,我遇到了同样的错误。您的架构中至少需要以下内容:
const schema = {
blocks: {
image: {
isVoid: true
}
}
};
推荐阅读
- javascript - x Time 后一个接一个地运行 JavaScript 函数
- python - TensorFlow批量归一化,维度错误
- python - TensorFlow 通过数组索引将张量分配给张量
- google-sheets-api - 如何使用 Google Sheets API 添加超链接?
- node.js - 即使设置了 ACL,也无法公开共享文件对象
- c++ - 来自输入文件的 Qt 串行端口通信;奇怪的行为
- c - 位运算符错误输出
- c# - 如果数量 <= 0,则将缺货消息传递给查看
- c# - 在 ASP.NET Core 中路由静态文件
- javascript - Angular 输入更新验证器