如何将脚本标签添加到我的 draftjs 编辑器？答案

【问题标题】：How can I add script tags to my draftjs editor?如何将脚本标签添加到我的 draftjs 编辑器？
【发布时间】：2018-01-20 03:16:36
【问题描述】：

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

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

感谢任何帮助！

【问题讨论】：

标签： reactjs draftjs

【解决方案1】：

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

在 Editor 组件中，可以指定 blockRendererFn 属性。这个 prop 函数允许更高级别的组件定义自定义基于块类型、文本、对 ContentBlock 对象进行 React 渲染或其他标准。

例如，我们可能希望渲染 ContentBlock 类型的对象使用自定义 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，值得重温。

【讨论】：

【解决方案2】：

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

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

【讨论】：