CKEditor5 反應和 ClassicEditor 的自定義構建不再工作

Question

在我的一個應用程序中，我使用了 CKEditor5 和 React。 標准版本不支持某些功能。 我使用這些功能進行了自定義構建。 它工作完美。 上周需要將圖片嵌入到編輯器中。 雖然我有一個添加圖像的按鈕，並且我可以選擇后面的文件，但它給出了一個錯誤，即沒有上傳插件。 然后我嘗試將 Base64UploadAdapter 添加到我的自定義構建中，並在 npmjs 上發布了我的自定義構建的新版本。 當我使用新版本時，我看不到編輯器。 之后我搜索了互聯網，我發現了使用 CKEditor 的 custombuilder 的建議。 我嘗試了custombuilder，它給了我來源。 我在 npmjs 構建並發布了新的 package。 我在我的項目中使用了這個新的。 它是一樣的。 不存在編輯器。 我不知道自定義構建操作有什么問題。

我的 ckeditor.js 文件：

    /**
 * @license Copyright (c) 2014-2021, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight.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 ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert.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 LinkImage from '@ckeditor/ckeditor5-link/src/linkimage.js';
import List from '@ckeditor/ckeditor5-list/src/list.js';
import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle.js';
import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown.js';
import MathType from '@wiris/mathtype-ckeditor5';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import MediaEmbedToolbar from '@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.js';
import Mention from '@ckeditor/ckeditor5-mention/src/mention.js';
import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat.js';
import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters.js';
import SpecialCharactersArrows from '@ckeditor/ckeditor5-special-characters/src/specialcharactersarrows.js';
import SpecialCharactersCurrency from '@ckeditor/ckeditor5-special-characters/src/specialcharacterscurrency.js';
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials.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 TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js';
import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount.js';

class Editor extends ClassicEditor {}

// Plugins to include in the build.
Editor.builtinPlugins = [
    Alignment,
    Autoformat,
    Base64UploadAdapter,
    BlockQuote,
    Bold,
    CodeBlock,
    Essentials,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    Heading,
    Highlight,
    HorizontalLine,
    Image,
    ImageCaption,
    ImageInsert,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    IndentBlock,
    Italic,
    Link,
    LinkImage,
    List,
    ListStyle,
    Markdown,
    MathType,
    MediaEmbed,
    MediaEmbedToolbar,
    Mention,
    PageBreak,
    Paragraph,
    PasteFromOffice,
    RemoveFormat,
    SpecialCharacters,
    SpecialCharactersArrows,
    SpecialCharactersCurrency,
    SpecialCharactersEssentials,
    SpecialCharactersLatin,
    SpecialCharactersMathematical,
    SpecialCharactersText,
    Strikethrough,
    Subscript,
    Superscript,
    Table,
    TableProperties,
    TableToolbar,
    TextTransformation,
    Underline,
    WordCount
];

export default Editor;

以前的版本看起來像：

新版本后它看起來：

該方法沒有區別，但現在不起作用。 有什么幫助嗎？

我的反應組件代碼：

import React from 'react';
import { connect } from 'react-redux';
import CKEditor from '@ckeditor/ckeditor5-react';
import moment from 'moment';
import Header from './header';
import Sidebar from './sidebar';
import FindingList from './findingList';
import {Button, Input, Accordion, Icon, Form} from 'semantic-ui-react';

import { postSaveReportFields, fetchUserList, fetchGroupList, setReportEditActiveIndex , setReportFieldsList,clearAuditProgramReportState,fetchProgramFindingList,
        postUpdateReportStatus
} from '../actions';
import ClassicEditor from '@sbilgil/ckeditor5-build-classic-with-alignment-upload';

......

return (<CKEditor
            editor={ ClassicEditor }
            data={text}
            onInit={ editor => {
                // You can store the "editor" and use when it is needed.
                console.log( 'Editor is ready to use!', editor );
            } }
            onChange={ ( event, editor ) => {
                const data = editor.getData();
                console.log( { event, editor, data, type } );
                this.setReportFieldsList(type,data)
            } }
            onBlur={ editor => {
                console.log( 'Blur.', editor );
            } }
            onFocus={ editor => {
                console.log( 'Focus.', editor );
            } }
        />)

Answer 1

您應該手動定義配置config={editorConfiguration}並定義自定義工具欄，因為它無法正確顯示 CKEditor5 生成的構建中的默認工具欄。

const editorConfiguration = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'subscript',
            'superscript',
            '|',
            'bulletedList',
            'numberedList',
            'todoList',
            '|',
            'alignment',
            'outdent',
            'indent',
        ]
    }
};

return (<CKEditor
        editor={ ClassicEditor }
        data={text}
        config={editorConfiguration}
        onInit={ editor => {
            // You can store the "editor" and use when it is needed.
            console.log( 'Editor is ready to use!', editor );
        } }
        onChange={ ( event, editor ) => {
            const data = editor.getData();
            console.log( { event, editor, data, type } );
            this.setReportFieldsList(type,data)
        } }
        onBlur={ editor => {
            console.log( 'Blur.', editor );
        } }
        onFocus={ editor => {
            console.log( 'Focus.', editor );
        } }
/>)

Answer 2

我找到了解決方案。 問題在於 npm 封裝系統或 CKEditor 封裝。 因為對於 Base64ImageUpload，我必須安裝 ckeditor-upload。 當我安裝它時，它會在其自身下創建 nodemodules 目錄，並且在該目錄中有一些 cekeditor 包，如 ckeditor-ui 等。當我在項目中構建和使用它時，會出現重復包之類的錯誤......在我意識到這一點后，我 go 回來了在我的 ckeditor 構建中，我刪除了 ckeditor-upload 下的 node_modules 目錄並構建它並發布它然后使用它。 它奏效了。 我不知道為什么在它沒有真正起作用之前。