CKEditor 与 Strapi 的高级配置答案

【问题标题】：Advanced configuration for CKEditor with StrapiCKEditor 与 Strapi 的高级配置
【发布时间】：2020-04-07 16:00:36
【问题描述】：

我关注the guide 将 Strapi 的 WYSIWYG 编辑器替换为 CKEditor。这工作得很好。

从 CKEditor 网站关注 the guide on how to use CKEditor as React Component 后，我希望 CKEditor 能够正常加载和运行。

但是，运行 npm run build 失败并出现以下错误： Error: Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css' in 'C:\work\myProject\backend\node_modules\@ckeditor\ckeditor5-image\theme'

代码 sn-ps

来自 package.json：

"dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^18.0.0",
    "@ckeditor/ckeditor5-react": "^2.1.0",
    "@ckeditor/ckeditor5-adapter-ckfinder": "^18.0.0",
    "@ckeditor/ckeditor5-alignment": "^18.0.0",
    "@ckeditor/ckeditor5-autoformat": "^18.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^18.0.0",
    "@ckeditor/ckeditor5-block-quote": "^18.0.0",
    // ...a lot more additional plugins

来自 C:\work\myProject\backend\extensions\content-manager\admin\src\components\CKEditor\index.js

import React from 'react';
import PropTypes from 'prop-types';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
// ...a lot more components imports

...

const editorConfig = {
  plugins: [
    Autoformat,
    BlockQuote,
    Bold,
    CKFinder,
    // ...the rest of the plugins
  ],
  toolbar: {
    items: [
      'undo',
      'redo',
      'CKFinder',
      '|',
      'heading',
      'fontFamily',
     //  ...the rest of the plugins
    ],
    image: {
      toolbar: [
        'imageTextAlternative',
        'imageStyle:full',
        'imageStyle:side'
    ]
  },
  table: {
    contentToolbar: [
      'tableColumn',
      'tableRow',
      'mergeTableCells',
      'tableCellProperties',
      'tableProperties'
    ]
  },
}

...

const Editor = ({ onChange, name, value }) => {
  return (
    <Wrapper>
      <CKEditor
        editor={ClassicEditor}
        data={value}
        config={editorConfig}
        onChange={(event, editor) => {
          const data = editor.getData();
          onChange({ target: { name, value: data } });
        }}
      />
    </Wrapper>
  );
};

系统

Node.js 版本：13.5.0
NPM 版本：6.13.4
Strapi 版本：3.0.0-beta.19.3
操作系统：Windows 10 专业版

CKEditor 指南建议我使用Advanced Setup。此设置需要特定的 Webpack 配置来编译 .css 文件和 .svg 图标。但我不确定我应该编辑的 Webpack 文件在哪里以及我应该如何做。也许这就是问题所在。

【问题讨论】：

目前无法扩展 webpack 配置。实现高级配置的唯一方法是单独构建编辑器查看此存储库npmjs.com/package/… 它可能会对您有所帮助
@soupette 感谢您的回复！我确实设法获得了经典配置，问题是我真的需要高级配置，因为它有很多我必须使用的插件。但据我所见——我真的需要在 Webpack 中配置它。我没有看到任何其他方式将这些插件包含在 SKEditor 配置中。现在说“当前”，是否意味着您计划在未来的版本中包含此类选项？
目前您可以做的是创建包，您可以在其中设置自定义 webpack 配置，然后，您可以在管理面板中要求您构建的模块。这是回购链接github.com/JelmerV-WFC/ckeditor5-build-classic 和相关的github 问题github.com/strapi/strapi/issues/4369
PR 尚未合并，但另一个是在编辑器中使用媒体库组件。这是即将发布的文档的 PR：github.com/strapi/strapi/pull/5755
哦，这也很棒，谢谢！迫不及待地想看看可以用它做什么！同时，我正在尝试自定义上述存储库，但又遇到了一些问题。但我为那个问题开了一个新问题：stackoverflow.com/questions/61137997/…

标签： ckeditor strapi

【解决方案1】：

你需要改变

import CKEditor from '@ckeditor/ckeditor5-react';

到

import { CKEditor } from '@ckeditor/ckeditor5-react';

参考：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

【讨论】：