为Strapi定制CKEditor可以提供“ ckeditor-duplicated-modules”。错误 [英] Customizing CKEditor for Strapi gives "ckeditor-duplicated-modules" error

问题描述

我尝试修改此存储库以自定义要使用的CKEditor在我的Strapi项目中。我添加了很多插件，这就是我的ckeditor.js文件的样子：

I tried to modify this repo to customize CKEditor I want to use in my Strapi project. I added a lot more plugins, this is what my ckeditor.js file looks like:

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
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';
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline.js';
import Image from '@ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '@ckeditor/ckeditor5-indent/src/indent.js';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock.js';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '@ckeditor/ckeditor5-link/src/link.js';
import List from '@ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import MediaEmbedToolbar from '@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.js';
import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import SimpleUploadAdapterStrapi from 'ckeditor5-upload-strapi/src/adapters/simpleuploadadapterstrapi';
import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters.js';
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials.js';
import SpecialCharactersArrows from '@ckeditor/ckeditor5-special-characters/src/specialcharactersarrows.js';
import SpecialCharactersCurrency from '@ckeditor/ckeditor5-special-characters/src/specialcharacterscurrency.js';
import SpecialCharactersLatin from '@ckeditor/ckeditor5-special-characters/src/specialcharacterslatin.js';
import SpecialCharactersMathematical from '@ckeditor/ckeditor5-special-characters/src/specialcharactersmathematical.js';
import SpecialCharactersText from '@ckeditor/ckeditor5-special-characters/src/specialcharacterstext.js';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript.js';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript.js';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import Title from '@ckeditor/ckeditor5-heading/src/title.js';
import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';

export default class AdvancedEditor extends ClassicEditorBase {}

AdvancedEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Alignment,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKFinder,
    CKFinderUploadAdapter,
    EasyImage,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    Heading,
    HorizontalLine,
    Image,
    ImageCaption,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    IndentBlock,
    Link,
    List,
    MediaEmbed,
    MediaEmbedToolbar,
    PageBreak,
    Paragraph,
    PasteFromOffice,
    SimpleUploadAdapterStrapi,
    SpecialCharacters,
    SpecialCharactersEssentials,
    SpecialCharactersArrows,
    SpecialCharactersCurrency,
    SpecialCharactersLatin,
    SpecialCharactersMathematical,
    SpecialCharactersText,
    Strikethrough,
    Subscript,
    Superscript,
    Table,
    TableCellProperties,
    TableProperties,
    TableToolbar,
    Title,
    TodoList,
    Underline
];

AdvancedEditor.defaultConfig = {
    // ...many configurations here
    language: 'en'
};

我运行 npm run build命令，然后将生成的文件（带有翻译文件夹）复制到 ./ extensions / content-manager / admin / src / components / CKEditor 文件夹，这就是我在index.js文件中使用它的方式：

I ran the "npm run build" command and then copied the generated file (with translations folder) to the ./extensions/content-manager/admin/src/components/CKEditor folder and this is how I used it in the index.js file:

import React from 'react';
import PropTypes from 'prop-types';
import CKEditor from '@ckeditor/ckeditor5-react';
import styled from 'styled-components';
import { auth } from 'strapi-helper-plugin';
import AdvancedEditor from './ckeditor.js';

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

const Editor = ({ onChange, name, value }) => {

  const jwtToken = auth.getToken();

  return (
    <Wrapper>
      <CKEditor
        editor={AdvancedEditor}
        data={value}
        onChange={(event, editor) => {
          const data = editor.getData();
          onChange({ target: { name, value: data } });
        }}
        config={{
          simpleUpload: {
            uploadUrl: `${strapi.backendURL}/upload`,
            headers: {
              Authorization: "Bearer " + jwtToken
            }
          }
        }}
      />
    </Wrapper>
  );
};

Editor.propTypes = {
  onChange: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
};

export default Editor

现在已经在IDE中（Webstorm），我收到一个重复的代码片段警告。构建正确通过了。但是，当我在浏览器上进入管理面板时，会看到以下错误消息：

Now already in IDE (Webstorm) I receive a Duplicated code fragment warning. Build passed correctly though. But when I go into Admin Panel on the browser I see this error message:

CKEditorError：ckeditor-duplicated-modules：一些CKEditor 5模块是重复。

我确实按照他们的说明进行操作，删除了 node_modules 文件夹并安装了所有内容再次出现，但仍然出现相同的错误。

I did follow their instructions, deleted the node_modules folder and installed everything again, but still getting the same error.

任何想法在这里出了什么问题？

Any ideas what is wrong here?

推荐答案

确定，终于知道了。问题出在所有版本为18.0.0的插件中。

OK, finally figured it out. The problem was in all the plugins with version 18.0.0

我想它们是复制某些模块的插件。降级到15.0.0版后-一切都按预期进行！

I guess they were the ones duplicating some modules. Once downgraded to version 15.0.0 - it all worked as it should!

这里是 GitHub存储库

并转到 npm软件包

这篇关于为Strapi定制CKEditor可以提供“ ckeditor-duplicated-modules”。错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！