DraftJs结合react-draft-wysiwyg自定义按钮插入原生HTML问题咨询

Draft.js基于自身的ContentState数据结构驱动内容渲染，不会解析普通文本中的HTML标签，所以直接调用insertText插入HTML代码只会渲染为纯文本。你需要按照以下步骤实现：

实现步骤 #

• 第一步：创建自定义Entity承载HTML相关配置
  Draft.js通过Entity存储自定义元素的额外数据，你可以自定义对应类型的Entity存储要插入的按钮配置：

const currentContent = editorState.getCurrentContent();
// 创建自定义Entity，类型可自定义，IMMUTABLE表示插入后不可编辑修改
const contentWithEntity = currentContent.createEntity(
  "CUSTOM_BUTTON",
  "IMMUTABLE",
  {
    // 存储按钮的所有配置：文本、样式、点击事件、完整HTML片段都可以
    text: "自定义按钮",
    className: "inserted-btn",
    onClick: () => console.log("按钮触发"),
    // 要插入完整HTML的话可以存rawHtml: '<button>xxx</button>'
  }
);
const entityKey = contentWithEntity.getLastCreatedEntityKey();

• 第二步：插入绑定了Entity的内容到光标位置
  调用DraftModifier.insertText时传入第五位的entityKey参数，将插入的内容和你创建的Entity绑定：

const currentSelection = editorState.getSelection();
const newContent = DraftModifier.insertText(
  contentWithEntity,
  currentSelection,
  " ", // 占位文本，渲染时会被自定义组件替换
  undefined,
  entityKey
);
// 更新编辑器状态
const newEditorState = EditorState.push(editorState, newContent, "insert-characters");
setEditorState(newEditorState);

• 第三步：配置自定义渲染逻辑渲染真实HTML节点
  给react-draft-wysiwyg的编辑器组件配置自定义实体渲染函数，遇到对应类型的Entity时渲染为真实的按钮节点：

// 自定义实体渲染函数
const customEntityRenderer = (block: ContentBlock) => {
  const entityKey = block.getEntityAt(0);
  if (!entityKey) return null;

  const entity = editorState.getCurrentContent().getEntity(entityKey);
  if (entity.getType() === "CUSTOM_BUTTON") {
    const { text, className, onClick, rawHtml } = entity.getData();
    return {
      // 直接渲染button组件
      component: () => <button className={className} onClick={onClick}>{text}</button>,
      // 要渲染任意HTML的话用下面的写法，注意处理XSS风险
      // component: () => <div dangerouslySetInnerHTML={{__html: rawHtml}} />,
      editable: false,
    };
  }
  return null;
};

// 将渲染函数传入Editor组件
<Editor
  editorState={editorState}
  onEditorStateChange={setEditorState}
  customEntityRenderer={customEntityRenderer}
/>

注意事项 #

• 不要直接操作编辑器DOM插入HTML内容，会和Draft内部的ContentState数据不同步，引发后续编辑异常
• 如果插入的HTML来自用户输入，必须做XSS校验后再使用dangerouslySetInnerHTML渲染

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