如何将草稿-js提及转换为html？

Question

我正在使用“@草稿-js-插件/提到”插件和丰富的文本功能提供草案-js。此外，我使用“草稿-js-export”库将编辑器状态转换为html。但是，这个库只将富文本样式转换为html，提及被转换为纯文本。如何将提到的内容转换为html标记，比如锚标记？在通过editorState函数获得JSON之后，需要手动操作JSON editorState吗？

Answer 1

“草稿- stateToHtml”库为其stateToHtml函数提供了第二个参数，其中可以提供选项，如entityStyleFn：

const options = {
  entityStyleFn: (entity) => {
    const entityType = entity.get("type").toLowerCase();

    if (entityType === "mention") {
      const { mention } = entity.get("data");
      return {
        element: "a",
        attributes: {
          userid: mention.userId,
        },
      };
    }
  },
};

let html = stateToHTML(contentState, options);

https://github.com/sstur/draft-js-utils/tree/master/packages/draft-js-export-html#entitystylefn

或者，草案-js的整个状态可以用convertToRaw函数以JSON的形式发送到后端，然后，在从后端返回数据之后，可以将该状态反馈给草案-js，并将@plugins plugins/ mentionComponent函数用于呈现自定义的html标记。

const mentionPlugin = createMentionPlugin({
      mentionComponent(mentionProps) {
        return (
          <span
            className={mentionProps.className}
            // eslint-disable-next-line no-alert
            onClick={() => alert('Clicked on the Mention!')}
          >
            {mentionProps.children}
          </span>
        );
      },
    });