CKEditor5-React：无法使用ImageInsert插件

如何解决CKEditor5-React：无法使用ImageInsert插件

我分叉并克隆了ckeditor5的经典版本，它在我的应用程序中正常工作了几个月。现在，我尝试添加最近与version 23.0.0 of ckeditor5.一起发布的 ImageInsert 插件。here.可以找到该文档*注意：我不确定100％确定该文档已已用版本23发行版进行了更新，我的问题是我找不到一个很好的示例来确切说明应如何实现（我一直在不断搜索他们的github存储库）。

我竟然下载了online builder，以了解如何在其中添加ImageInsert。这样，您可以看到正确的导入位置以及在何处添加插件，但是没有如何将imageInsert添加到工具栏中的示例。 （我想像其他文件一样，它是驼峰式'imageInsert'（例如'blockQuote'）。

但是那里没有骰子。在我的控制台中，出现了“ toolbarview-item-unavailable” 错误，并带有指向this error code.的链接。

我已经相应地更新了我的软件包，使它们与在线构建器的版本相同，并且在您添加插件的文件（src / ckeditor.js）中，我与在线构建器没有区别，除了我已将'imageInsert'添加到我的工具栏中，并保留了image.toolbar.upload.panel.items：['insertimageViaUrl']也包括在内。为了记录，我尝试了有无。

所以我需要你的帮助。我在下面包括了代码的精简版（为了便于阅读，我删去了一些冗余）。第一个文件是src / ckeditor.js文件。第二个文件是我在ckeditor5-build-classic存储库中的package.json。我的第三个文件是我实际项目中ckeditor5的实例，编辑器是自定义的。

// src/ckeditor.js within the ckeditor5-build-classic forked + cloned repo.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import Imagetoolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
  Image,ImageCaption,ImageStyle,Imagetoolbar,ImageUpload,ImageInsert,];

// Editor configuration.
ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'heading','|','bold','italic','link','bulletedList','numberedList','indent','outdent','imageUpload','imageInsert','blockQuote','codeBlock','insertTable','mediaEmbed','undo','redo'
    ]
  },image: {
    toolbar: [
      'imageTextAlternative'
    ],upload: {
      panel: {
        items: ['insertimageViaUrl']
      }
    }
  },// This value must be kept in sync with the language defined in webpack.config.js.
  language: 'en'
};

-

// package.json within the ckeditor5-build-classic forked + cloned repo.
    {
      "name": "@ckeditor/ckeditor5-build-classic","version": "19.0.0","description": "The classic editor build of CKEditor 5 – the best browser-based rich text editor.","main": "./build/ckeditor.js","files": [
        "build"
      ],"devDependencies": {
        "@ckeditor/ckeditor5-adapter-ckfinder": "^23.0.0","@ckeditor/ckeditor5-autoformat": "^23.0.0","@ckeditor/ckeditor5-basic-styles": "^23.0.0","@ckeditor/ckeditor5-block-quote": "^23.0.0","@ckeditor/ckeditor5-ckfinder": "^23.0.0","@ckeditor/ckeditor5-code-block": "^23.0.0","@ckeditor/ckeditor5-core": "^23.0.0","@ckeditor/ckeditor5-dev-utils": "^23.6.0","@ckeditor/ckeditor5-dev-webpack-plugin": "^23.6.0","@ckeditor/ckeditor5-easy-image": "^23.0.0","@ckeditor/ckeditor5-editor-classic": "^23.0.0","@ckeditor/ckeditor5-essentials": "^23.0.0","@ckeditor/ckeditor5-heading": "^23.0.0","@ckeditor/ckeditor5-image": "^23.0.0","@ckeditor/ckeditor5-indent": "^23.0.0","@ckeditor/ckeditor5-link": "^23.0.0","@ckeditor/ckeditor5-list": "^23.0.0","@ckeditor/ckeditor5-media-embed": "^23.0.0","@ckeditor/ckeditor5-paragraph": "^23.0.0","@ckeditor/ckeditor5-paste-from-office": "^23.0.0","@ckeditor/ckeditor5-table": "^23.0.0","@ckeditor/ckeditor5-theme-lark": "^23.0.0","@ckeditor/ckeditor5-typing": "^23.0.0","eslint": "^5.5.0","eslint-config-ckeditor5": "^2.0.0","husky": "^1.3.1","lint-staged": "^7.0.0","postcss-loader": "^3.0.0","raw-loader": "^3.1.0","style-loader": "^1.0.0","stylelint": "^11.1.1","stylelint-config-ckeditor5": "^1.0.0","terser-webpack-plugin": "^2.2.1","webpack": "^4.39.1","webpack-cli": "^3.3.6"
      },"engines": {
        "node": ">=8.0.0","npm": ">=5.7.1"
      }

-

//Instance of CKEditor found in my project
import React from 'react'
import CKEditor from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const CKEditorForPosts = (props) => {
  const { handleEditorChange,freeContent } = props;
  return (
    <>
      <CKEditor
        editor={ClassicEditor}
        id={'editor'}
        config={editorConfiguration}
        data={freeContent}
        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();
          handleEditorChange(data);
        }}
      />
    </>
  )
}

const editorConfiguration = {
  toolbar: [
    'heading','redo'
  ],heading: {
    options: [
      { model: 'paragraph',title: 'Paragraph',class: 'ck-heading_paragraph' },{ model: 'heading1',view: 'h3',title: 'heading 1',class: 'ck-heading_heading1' },{ model: 'heading2',view: 'h4',title: 'heading 2',class: 'ck-heading_heading2' }
    ]
  },image: {
    upload: {
      panel: {
        items: [
          'insertimageViaUrl'
        ]
      }
    }

  },};

export default CKEditorForPosts;

-

我已经安装并重新安装了很多次软件包，并且也尝试过各种不同的尝试。当我为 ckeditor5-build-classic 更新新版本时，我在链接到github存储库的实际项目中卸载了repo，然后重新安装它，以便node_modules随后进行相应更新。我没有错过这一步。

因此，我认为我已经尝试了所有方法，确实可以使用一些帮助。任何将不胜感激。让我知道我有什么可以帮助您的。谢谢您的时间。