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

2 回答

• 0

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

  在Editor组件中，可以指定blockRendererFn prop . 此prop函数允许更高级别的组件根据块类型，文本或其他条件为ContentBlock对象定义自定义React呈现 . 例如，我们可能希望使用自定义MediaComponent渲染类型为'atomic'的ContentBlock对象 . function myBlockRenderer（contentBlock）{
  const type = contentBlock.getType（）;
  if（type ==='atomic'）{
  返回{
  组件：MediaComponent，
  可编辑的：假的，
  道具： {
  foo：'bar'，
  }，
  };
  }
  }

  // 然后...
  从'draft-js'导入;
  class EditorWithMedia扩展了React.Component {
  ...
  render（）{
  return <Editor ... blockRendererFn = />;
  }
  }
  如果blockRendererFn函数未返回自定义渲染器对象，则Editor将呈现默认的DraftEditorBlock文本块组件 . component属性定义要使用的组件，而可选的props对象包含将通过props.blockProps子属性对象传递给呈现的自定义组件的props . 此外，可选的editable属性确定自定义组件是否为contentEditable . 如果您的自定义组件不包含文本，强烈建议您使用editable：false . 如果组件包含ContentState提供的文本，则自定义组件应构成DraftEditorBlock组件 . 这将允许Draft框架在您的内容中正确维护游标行为 . 通过在更高级别组件的上下文中定义此函数，可以将此自定义组件的props绑定到该组件，从而允许自定义组件props的实例方法 . 定义自定义块组件在MediaComponent中，最可能的用例是您需要检索实体元数据以呈现自定义块 . 您可以在EditorState管理期间将实体键应用于“原子”块中的文本，然后在自定义组件render（）代码中检索该键的元数据 . class MediaComponent扩展了React.Component {
  render（）{
  const {block，contentState} = this.props;
  const = this.props.blockProps;
  const data = contentState.getEntity（block.getEntityAt（0）） . getData（）;
  //使用此数据返回<figure>或其他内容 .
  }
  }
  ContentBlock对象和ContentState记录在自定义组件中可用，以及在顶级定义的props . 通过从ContentBlock和实体映射中提取实体信息，您可以获取呈现自定义组件所需的元数据 . 从块中检索实体无疑是一个尴尬的API，值得重新审视 .

  回复于 2024-04-26T09:01:25+08:00
• 0

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

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

  回复于 2024-04-26T09:01:25+08:00