0

在我的一个应用程序中，我使用了 CKEditor5 和 React。标准版本不支持某些功能。我使用这些功能进行了自定义构建。它工作完美。上周需要将图片嵌入到编辑器中。虽然我有一个添加图像的按钮，并且我可以选择后面的文件，但它给出了一个错误，即没有上传插件。然后我尝试将 Base64UploadAdapter 添加到我的自定义构建中，并在 npmjs 上发布了我的自定义构建的新版本。当我使用新版本时，我看不到编辑器。之后我搜索了互联网，我找到了使用 CKEditor 的 custombuilder 的建议。我尝试了custombuilder，它给了我来源。我在 npmjs 构建并发布了新包。我在我的项目中使用了这个新的。它是一样的。不存在编辑器。我不知道自定义构建操作有什么问题。

我的 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 );
            } }
        />)
4

2 回答 2

0

您应该手动定义配置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 );
        } }
/>)
于 2021-04-23T11:07:34.900 回答
0

我找到了解决方案。问题在于 npm 打包系统或 CKEditor 包。因为对于 Base64ImageUpload 我必须安装 ckeditor-upload。当我安装它时，它会在其自身下创建 nodemodules 目录，并且在该目录中有一些 cekeditor 包，如 ckeditor-ui 等。当我在项目中构建和使用它时，会出现重复包之类的错误......在我意识到这一点后，我回去了在我的 ckeditor 构建中，我删除了 ckeditor-upload 下的 node_modules 目录并构建它并发布它然后使用它。它奏效了。我不知道为什么在它没有真正起作用之前。

于 2021-04-26T12:35:54.203 回答