如何移除react-rte的工具栏？已尝试toolbarConfig={[]}和showToolbar={false}

我之前也碰到过类似的坑，光设置toolbarConfig={[]}和showToolbar={false}有时候确实压不住，毕竟Editor组件默认还是带着编辑相关的容器和状态。给你两个亲测有效的解决方案：

方案一：用Editor组件的只读模式彻底隐藏工具栏 #

如果还是想借助Editor组件来展示内容，一定要加上只读配置，配合隐藏工具栏的设置才能彻底生效：

import React from 'react';
import RichTextEditor from 'react-rte';

const HtmlDisplay = ({ htmlContent }) => {
  // 把HTML字符串转换成react-rte需要的Value格式
  const contentValue = RichTextEditor.createValueFromString(htmlContent, 'html');

  return (
    <RichTextEditor
      value={contentValue}
      readOnly={true} // 关键！开启只读模式后组件会切换到纯展示状态
      showToolbar={false}
      toolbarConfig={[]}
      // 可选：去掉默认的边框和内边距，让内容更贴合你的页面样式
      style={{
        border: 'none',
        padding: 0,
        minHeight: 'auto',
      }}
    />
  );
};

export default HtmlDisplay;

方案二：直接渲染HTML（更轻量） #

如果完全不需要编辑功能，其实没必要用Editor组件，直接渲染HTML字符串反而更简洁：

import React from 'react';

const HtmlDisplay = ({ htmlContent }) => {
  return (
    <div
      dangerouslySetInnerHTML={{ __html: htmlContent }}
      // 可以自定义样式来匹配你的页面排版
      style={{
        lineHeight: 1.6,
        fontSize: '16px',
        color: '#333',
      }}
    />
  );
};

export default HtmlDisplay;

这种方式完全绕开了react-rte的工具栏和编辑容器，直接把HTML内容渲染到页面上。注意：如果HTML内容来自用户输入，记得先做XSS过滤保证安全性。

为什么之前的设置没生效？ #

核心原因是没开启readOnly={true}——react-rte的Editor即使隐藏了工具栏，默认还是处于可编辑状态，会残留一些编辑相关的隐藏元素或容器样式。加上只读配置后，组件会彻底切换到纯展示模式，那些多余的元素就会消失。

内容的提问来源于stack exchange，提问作者Maifee Ul Asad