如何在Remirror Renderer中显示渲染后的HTML？

问题原因 #

你使用的RemirrorRenderer参数不正确，它需要接收Remirror文档的JSON结构（而非直接传入state对象）；另外如果要展示渲染后的HTML可视化结果，需要从编辑器状态中提取HTML字符串并渲染，而非依赖RemirrorRenderer。

修改后的代码 #

import { useRemirror, Remirror, EditorComponent, Menu } from '@remirror/react';
// 导入你用到的所有Extension
import { 
  BoldExtension, 
  ItalicExtension, 
  UnderlineExtension,
  BulletListExtension,
  OrderedListExtension,
  TextColorExtension,
  TextHighlightExtension,
  HeadingExtension,
  HardBreakExtension
} from '@remirror/extensions';

function EditorWithPreview({ content }) {
  const { manager, state, setState } = useRemirror({
    extensions: () => [
      new BoldExtension(),
      new ItalicExtension(),
      new UnderlineExtension(),
      new BulletListExtension(),
      new OrderedListExtension(),
      new TextColorExtension(),
      new TextHighlightExtension(),
      new HeadingExtension(),
      new HardBreakExtension()
    ],
    content: content,
    selection: 'start',
    stringHandler: 'html',
  });

  // 从编辑器状态中提取HTML字符串
  const renderedHtml = manager.view.state.doc.toHTML();
  // 将HTML包装为JSON格式（满足你"通过JSON显示"的需求）
  const htmlJson = JSON.stringify({ renderedContent: renderedHtml }, null, 2);

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      {/* 编辑器区域 */}
      <Remirror 
        manager={manager} 
        initialContent={state} 
        state={state} 
        onChange={(param) => setState(param.state)}
      >
        <EditorComponent />
        <Menu />
      </Remirror>

      {/* 可视化的编辑结果预览 */}
      <h3>编辑结果预览</h3>
      <div 
        style={{ 
          padding: '15px', 
          border: '1px solid #e0e0e0', 
          borderRadius: '4px', 
          marginTop: '20px' 
        }}
        dangerouslySetInnerHTML={{ __html: renderedHtml }}
      />

      {/* JSON格式的HTML内容展示 */}
      <h3>JSON格式的HTML内容</h3>
      <pre style={{ 
        padding: '15px', 
        backgroundColor: '#f5f5f5', 
        borderRadius: '4px', 
        marginTop: '10px',
        whiteSpace: 'pre-wrap'
      }}>
        {htmlJson}
      </pre>
    </div>
  );
}

关键说明 #

1. 获取HTML内容：通过manager.view.state.doc.toHTML()可以直接从编辑器当前状态中提取对应的HTML字符串，这是Remirror内置的方法，能准确转换你配置的所有格式。
2. 渲染可视化结果：使用dangerouslySetInnerHTML将HTML字符串转换为可视化的DOM内容，这会直接展示编辑后的排版效果，而非打印代码。
3. JSON格式展示：通过JSON.stringify把HTML字符串包装成JSON对象并格式化，满足你"通过JSON显示渲染后的HTML"的需求。
4. 关于RemirrorRenderer：如果一定要用这个组件，需要传入文档的JSON结构（state.doc.toJSON()），同时传入manager参数，代码如下，但它本质是重新渲染一份编辑器内容，和原编辑器展示一致，并非纯HTML渲染：

<RemirrorRenderer json={state.doc.toJSON()} manager={manager} />

注意事项 #

使用dangerouslySetInnerHTML时，若编辑器内容来自不可信用户输入，需先做XSS过滤处理，避免安全风险。

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