能否在React版TinyMCE（@tinymce/tinymce-react 4.3.0）中添加Accordion功能？

核心原理 #

@tinymce/tinymce-react 只是TinyMCE核心编辑器的React封装层，功能支持度取决于你使用的TinyMCE核心版本，而非React封装包的版本。@tinymce/tinymce-react 4.3.0 完全兼容TinyMCE 6.x系列，所以可以直接启用Accordion功能。

步骤1：安装正确版本的依赖 #

确保同时安装React封装包和指定版本的TinyMCE核心：

npm install @tinymce/tinymce-react@4.3.0 tinymce@6.5.0

步骤2：配置编辑器启用Accordion插件 #

在React组件中，通过plugins属性添加accordion插件，并在toolbar中加入对应的按钮：

import { Editor } from '@tinymce/tinymce-react';

function TinyMCEWithAccordion() {
  return (
    <Editor
      apiKey="你的API密钥" // 云托管版需要，本地部署可省略
      init={{
        height: 500,
        plugins: 'accordion advlist autolink lists link image charmap print preview anchor',
        toolbar: 'undo redo | accordion | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        // 可选：自定义Accordion默认配置
        accordion_default_state: 'collapsed',
        accordion_panel_title_placeholder: '面板标题'
      }}
    />
  );
}

export default TinyMCEWithAccordion;

步骤3：前端渲染Accordion内容的样式支持 #

如果需要在React页面中展示编辑器生成的Accordion HTML，需引入TinyMCE的Accordion样式文件，确保交互和样式正常：

// 在组件顶部引入样式
import 'tinymce/plugins/accordion/css/accordion.min.css';

// 渲染编辑器输出的HTML内容
function AccordionContent({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

注意事项 #

• 本地部署TinyMCE时，需确保accordion相关的插件文件（js、css）已正确加载，可通过skin_url和plugins_url配置文件路径。
• 云托管版TinyMCE会自动包含最新插件，只需在plugins中声明即可。

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