reactjs - @ckeditor : Error: Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css'

Question

我正在尝试自定义 @ckeditor 在我的 react 中 strapi应用程序。

这是我的 package.json :

"@ckeditor/ckeditor5-basic-styles": "^16.0.0",
"@ckeditor/ckeditor5-block-quote": "^16.0.0",
"@ckeditor/ckeditor5-editor-classic": "^16.0.0",
"@ckeditor/ckeditor5-essentials": "^16.0.0",
"@ckeditor/ckeditor5-link": "^16.0.0",
"@ckeditor/ckeditor5-list": "github:ckeditor/ckeditor5-list",
"@ckeditor/ckeditor5-react": "^2.0.0",
"@ckeditor/ckeditor5-ui": "^16.0.0",

这是我的 WYSIWYG编辑:

import React from 'react';
import PropTypes from 'prop-types';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import styled from 'styled-components';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';


ClassicEditor.builtinPlugins = [
  Essentials,
  Bold,
    Italic,
  BlockQuote,
  Paragraph,
  List,
  Underline,
  Strikethrough,
  Subscript,
  Superscript,
  Link,
  Code
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
    'Underline', 
    'Strikethrough', 
    'Code', 
    'Subscript', 
    'Superscript',
    'link',
    'bulletedList',
    'numberedList'
    ]
  },
  language: 'en'  
};


const Wrapper = styled.div`
  .ck-editor__main {
    min-height: 200px;
    > div {
      min-height: 200px;
    }
  }
`;

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

export default Editor;

当我尝试 strapi build ，我收到以下错误:
Error: Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css' in '/Users/xx/Documents/xx/01. Code/Franklin-ford/franklin-ford-cms/ford-cms/node_modules/@ckeditor/ckeditor5-link/theme'
注:当我去 node_modules/@ckeditor/ckeditor5-link/theme ，我没有看到所需的 /mixins/_rwd.css
谢谢你的帮助

Answer 1

我也遇到过这个，_rwd.css在 ckeditor5-ui正如错误消息所指定的，但是因为 create-react-app 缺少一些 webpack 插件而没有被加载，所以你需要弹出应用程序并尝试像在 here 中那样集成它们.
This是我最终得到的，但在 react 方面有问题。
但是考虑到弹出和额外的构建时间，最好将它包含在一个预构建的模块中，例如 here .
更新:
我设法通过从预先构建的模块 here 创建一个本地 npm 模块来让它工作。然后使用 "my-ckeditor": "file: ]../../vendor/ckeditor"通过 package.json 作为包导入。该软件包是在 npm i install 期间使用预安装构建的。