我已经开始用DraftJS构建一个富文本编辑器，并取得了不错的进展。现在我坚持添加嵌入式内容。我尝试通过单独编辑 html 并使用新 html 调用 convertFromHTML 来手动添加脚本标签，但这不起作用。
我想将 gist 等内容添加到我的富文本编辑器中，但不确定如何添加。
任何帮助不胜感激！
您需要使用自定义块组件：https://draftjs.org/docs/advanced-topics-block-components.html#custom-block-components
在编辑器组件中，可以指定blockRendererFn属性。 此 prop 函数允许更高级别的组件定义自定义 React 渲染 ContentBlock 对象，基于块类型、文本、 或其他标准。
例如，我们可能希望渲染类型的 ContentBlock 对象 使用自定义媒体组件的"原子"。
function myBlockRenderer(contentBlock) { const type = contentBlock.getType(); if (type === 'atomic') { return { component: MediaComponent, editable: false, props: { foo: 'bar', }, }; } } // Then... import {Editor} from 'draft-js'; class EditorWithMedia extends React.Component { ... render() { return <Editor ... blockRendererFn={myBlockRenderer} />; } }如果 blockRendererFn 未返回任何自定义渲染器对象 函数，编辑器将呈现默认的草稿编辑器块文本块 元件。
组件属性定义要使用的组件，而 可选 props 对象包括将传递到 通过 props.blockProps 子属性呈现的自定义组件 对象。此外，可选的可编辑属性确定是否 自定义组件是内容可编辑的。
强烈建议您使用可编辑：false，如果您的自定义 组件将不包含文本。
如果您的组件包含 ContentState 提供的文本，则您的 自定义组件应由 DraftEditorBlock 组件组成。这 将允许框架草案正确维护游标行为 在您的内容中。
通过在更高级别的上下文中定义此功能 组件，此自定义组件的 props 可能绑定到该组件 组件，允许自定义组件属性的实例方法。
定义自定义块组件
在 MediaComponent 中，最可能的用例是您希望将实体元数据检索到 呈现您的自定义块。您可以将实体键应用于文本 在编辑器状态管理期间的"原子"块中，然后检索 自定义组件 render() 代码中该键的元数据。
class MediaComponent extends React.Component { render() { const {block, contentState} = this.props; const {foo} = this.props.blockProps; const data = contentState.getEntity(block.getEntityAt(0)).getData(); // Return a <figure> or some other content using this data. } }ContentBlock 对象和 ContentState 记录可用 在自定义组件中，以及顶部定义的道具 水平。通过从内容块和 实体映射，您可以获取呈现自定义所需的元数据 元件。
诚然，从块中检索实体有点尴尬 API，值得重新审视。
基本上迈克的答案就是解决方案。几天前我们有类似的需求，我们创建了以下插件 https://github.com/jimmycodesocial/draft-js-iframely-plugin
PD：它使用 iframely.com 服务(但你可以根据自己的需求进行调整)。