如何展示DraftJS编辑器保存的内容？链接实体不可点击求助

我之前也碰到过一模一样的问题！DraftJS确实能通过convertFromRaw完美还原保存的ContentState，但默认情况下，LINK类型的实体只会被渲染成普通文本，完全没有可点击的交互——这是因为DraftJS并没有内置链接实体的默认渲染逻辑，得我们自己定义一个实体渲染器来处理。

下面是具体的解决步骤：

1. 自定义实体渲染函数 #

DraftJS的Editor组件提供了renderEntity属性，我们可以通过这个函数来指定不同类型实体的渲染方式。针对LINK实体，我们要把它转换成标准的<a>标签：

const renderEntity = (entity, _, decoratedText) => {
  // 判断当前实体是否为LINK类型
  if (entity.getType() === 'LINK') {
    // 从实体数据中取出保存的链接地址
    const { url } = entity.getData();
    // 返回可点击的a标签
    return (
      <a
        href={url}
        target="_blank" // 可选：在新标签页打开
        rel="noopener noreferrer" // 安全属性，防止钓鱼攻击
        style={{ color: '#1890ff', textDecoration: 'underline' }} // 自定义样式，和编辑器里的链接样式匹配
      >
        {decoratedText}
      </a>
    );
  }
  // 其他类型的实体，默认返回原文本
  return decoratedText;
};

2. 在Editor组件中使用这个渲染函数 #

接下来，我们只需要把这个渲染函数传给Editor组件，同时如果只是用来展示帖子（不需要编辑），记得加上readOnly属性：

import { Editor, EditorState, convertFromRaw } from 'draft-js';
import { useState, useEffect } from 'react';

const PostDisplay = ({ savedContent }) => {
  const [editorState, setEditorState] = useState(null);

  useEffect(() => {
    // 解析保存的ContentState字符串，还原成ContentState对象
    const contentState = convertFromRaw(JSON.parse(savedContent));
    // 创建对应的EditorState
    setEditorState(EditorState.createWithContent(contentState));
  }, [savedContent]);

  if (!editorState) return <div>加载中...</div>;

  return (
    <div style={{ border: '1px solid #e8e8e8', padding: '16px', borderRadius: '4px' }}>
      <Editor
        editorState={editorState}
        readOnly={true} // 设置为只读模式，只做展示
        renderEntity={renderEntity} // 传入自定义的实体渲染函数
        // 如果不需要编辑器的边框、工具栏等样式，可以自定义Editor的样式
        style={{ border: 'none' }}
      />
    </div>
  );
};

export default PostDisplay;

3. 额外注意事项 #

• 确保你保存ContentState的时候，LINK实体的data字段里确实包含url属性——也就是创建链接时是用Entity.create('LINK', { url: '你的链接地址' })这种方式生成的实体，不然渲染的时候拿不到url就白搭了。
• 如果你用了DraftJS的插件（比如draft-js-plugins），可能需要调整插件的配置，但原生的renderEntity方法已经能覆盖绝大多数基础展示场景了。

这样处理之后，还原出来的链接就会变成可点击的超文本啦！

内容的提问来源于stack exchange，提问作者acmoune