@ckeditor:错误:找不到模块:错误:无法解析'./@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css‘

Question

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

这是我的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：]../../ package.json /ckeditor“通过package.json将其作为包导入。这个包是在npm安装过程中使用preinstall构建的。

​

​