Расширенная конфигурация для CKEditor со страпой - PullRequest
Новая
       12

Расширенная конфигурация для CKEditor со страпой

0 голосов
/ 07 апреля 2020

Я следовал руководству , чтобы заменить WYSIWYG-редактор Strapi на CKEditor. Это сработало просто отлично.

После следования руководству по использованию CKEditor в качестве React Component с сайта CKEditor я ожидал, что 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'

Фрагменты кода

Из пакета. 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 Pro

Руководство CKEditor предполагает, что я использую Advanced Setup . Эта настройка требует определенной конфигурации Webpack для компиляции. css файлов и иконок .svg. Но я не уверен, где находится файл Webpack, который я должен редактировать, и как мне это сделать. Возможно, в этом проблема.

...