0

我正在使用草稿 js 编辑器及其链接和提及插件。在编辑器上添加链接和提及链接可以正常工作，但是当我尝试获取 html 时，会从内容中删除锚标记。

我的编辑器渲染

return (
    <div
      className={editorStyles.editor}
      style={{ height: '150px', padding: '10px' }}
      onClick={() => {
        ref.current.focus();
      }}>
      <Editor
        editorKey={'editor'}
        editorState={editorState}
        onChange={onChange}
        plugins={plugins}
        placeholder={"What's on your mind"}
        ref={ref}
      />
      <MentionSuggestions
        open={open}
        onOpenChange={onOpenChange}
        suggestions={mentions}
        onSearchChange={onSearchChange}
        onAddMention={(e) => {
         
        }}
      />
    </div>
  );

这就是我尝试获取 HTML 的方式

draftToHtml(convertToRaw(_editorState.getCurrentContent()));

如果编辑器有一个链接，比如 google.com，上面的代码会返回纯文本而不是锚标记，尽管它在编辑器中显示了锚标记。与提及相同，我正在添加提及的链接，但锚标记也被删除。如果我复制粘贴链接说Wikipedia，则不会删除此锚标记。

如何使用链接和提及的锚标记获取这些 html？需要帮忙。我不是这里的专业人士。

编辑1： 我进一步检查并发现

  1. convertToRaw 上的 Linkify 以纯文本形式返回
  2. 提及适用于 convertToRaw，但 DraftToHtml 在这里不工作，因为它不受支持。

我将不得不操纵原始数据以获得必要的结果。

4

1 回答 1

0

呈现的链接是提及/链接组件的一部分，而不是文本的一部分。这就是为什么它在导出中丢失。

如果要在输出中包含链接，则draftToHtml需要使用customEntityTransform参数。

从文档中：

customEntityTransform可用于将自定义实体块转换为 html。如果出现它为实体生成 html 的调用。它可以带2个参数：

  • entity（具有{类型，可变性，数据}的对象）
  • text块中存在的文本。
于 2021-04-24T16:43:58.677 回答