Question

我已经开始使用DraftJS构建一个富文本编辑器并取得了不错的进展。现在我不得不添加嵌入内容了。我尝试通过单独编辑html手动添加脚本标记并使用新的html调用convertFromHTML，但这不起作用。

我想在我的富文本编辑器中添加gists等内容，但不确定如何。

感谢任何帮助！

Answer 1

您需要使用自定义块组件：https://draftjs.org/docs/advanced-topics-block-components.html#custom-block-components

在Editor组件中，可以指定blockRendererFn prop。   此prop函数允许更高级别的组件定义自定义   根据块类型，文本，对ContentBlock对象进行反应渲染，   或其他标准。

例如，我们可能希望呈现类型的ContentBlock对象   'atomic'使用自定义MediaComponent。
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没有返回自定义渲染器对象   函数，Editor将呈现默认的DraftEditorBlock文本块   成分

component属性定义要使用的组件，而   可选的props对象包含将传递给的道具   通过props.blockProps子属性渲染的自定义组件   宾语。此外，可选的editable属性确定是否   自定义组件是contentEditable。

如果您的自定义，强烈建议您使用editable：false   组件不包含文本。

如果您的组件包含ContentState提供的文本，则表示您的   自定义组件应该组成一个DraftEditorBlock组件。这个   将允许Draft框架正确维护游标行为   在你的内容中。

通过在更高级别的上下文中定义此函数   组件，此自定义组件的道具可能绑定到该组件   组件，允许自定义组件道具的实例方法。

定义自定义块组件

在MediaComponent中，最可能的用例是您需要检索实体元数据   渲染您的自定义块。您可以将实体密钥应用于文本   在EditorState管理期间的“原子”块内，然后检索   自定义组件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记录可用   在自定义组件中，以及在顶部定义的道具   水平。通过从ContentBlock中提取实体信息   实体地图，您可以获取渲染自定义所需的元数据   成分

从块中检索实体无疑是有点尴尬   API，值得重新访问。

Answer 2

基本上迈克的答案是解决方案。我们之前几天有类似的需求，我们创建了以下插件https://github.com/jimmycodesocial/draft-js-iframely-plugin

PD：它使用iframely.com服务（但您可以根据自己的需要进行调整）。

如何将脚本标签添加到draftjs编辑器中？

2 个答案:

定义自定义块组件