React项目中如何在CKEditor 4中导入含外部CSS样式的HTML文件？

• 检查文件路径正确性
  确认converted-style.css的存放位置，如果是React项目，静态资源要放在public目录下，路径改成/converted-style.css（根路径）。组件里的相对路径./指向的是src目录，CKEditor无法从这里加载静态资源，所以必须用public目录下的根路径。

• 确认插件适配版本
  注意stylesheetparser是CKEditor 4的插件，如果用的是CKEditor 5，这个插件根本不兼容，得换方案。CKEditor 5要实现加载外部样式，得用GeneralHtmlSupport插件，或者直接通过contentsCss配置引入。

• CKEditor 5适配代码示例
  如果用的是CKEditor 5，替换成下面的代码试试：

  import { CKEditor } from '@ckeditor/ckeditor5-react';
  import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport';
  
  function App() {
    const [htmlContent, setHtmlContent] = useState(html);
  
    return (
      <div>
        <CKEditor
          editor={ClassicEditor}
          initData={htmlContent}
          config={{
            plugins: [GeneralHtmlSupport],
            htmlSupport: {
              allow: [
                // 允许style标签和相关属性
                { name: 'style', elements: true }
              ]
            },
            // 加载public目录下的外部样式文件
            contentsCss: '/converted-style.css'
          }}
          onChange={(event, editor) => {
            setHtmlContent(editor.getData());
          }}
        />
      </div>
    );
  }
  

• 验证资源加载状态
  打开浏览器开发者工具的Network标签，刷新页面后查看converted-style.css的加载状态：

  • 如果显示404，说明路径还是错的，调整路径到正确位置；
  • 如果加载成功，检查CSS选择器是否和HTML里的元素匹配，比如类名拼写、标签选择器是否正确。

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