使用 ReactJS 將插件添加到 CKEditor5 的自定義構建

Question

我正在嘗試將插件添加到 CKEditor5 的經典版本中。 我已按照此頁面上的說明進行操作： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

我可以說我已經正確完成了所有操作，因為當我打開sample/index.html時，一切正常。

現在是時候將這個自定義構建與我的 react 應用程序集成了。

此頁面上的說明，“描述”要做什么：

您將在項目旁邊的某個位置創建一個新構建，並像包含現有構建之一一樣包含它。

它說“包括它，就像你包含在現有版本之一中一樣”。 好吧，這就是我包含經典版本的方式：

import React from "react";
import ReactDOM from "react-dom";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <CKEditor
        editor={ClassicEditor}
        // Other Props
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

所以，我會假設我會做這樣的事情：

import React from "react";
import ReactDOM from "react-dom";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from './ckeditor/ckeditor'


import "./styles.css";

function App() {
  return (
    <div className="App">
      <CKEditor
        editor={ClassicEditor}
        // Other Props
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

也就是說，只需將import語句更改為：

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

至

import ClassicEditor from './ckeditor/ckeditor'

使用./ckeditor/ckeditor/是ckeditor.js文件，該文件位於我的自定義構建的修改版本的build文件夾中。

但是，這不起作用。 新的 ckeditor.js 文件中沒有導出。 既不是默認導出也不是命名導出。 所以也許我應該像這樣導入文件：

import './ckeditor/ckeditor'

但是我如何告訴 React 組件使用哪個編輯器。 有一個editor prop，它采用要使用的編輯器的名稱——即：

<CKEditor
  editor={ClassicEditor}
  // Other Props
/>

所以我被困住了。 我不知道如何將自定義構建包含到我的反應應用程序中。

有任何想法嗎？

謝謝。

Answer 1

CKEditor 團隊幫我解決了這個問題。 您可以在此處閱讀解決方案： https://github.com/ckeditor/ckeditor5/issues/2072#issuecomment-534987536

The main point was that I needed to publish my customized build as an npm package, install that package on my site and then import the installed package.

一旦我這樣做了，一切都很好。

Answer 2

忘記您對自定義 cke4 的了解，然后閱讀此內容

---

自定義 CK5 編輯器的步驟

• fork ckeditor5 經典版本
• 克隆你的叉子
• 定制 ckeditor（我使用了在線構建工具）
• 構建編輯器$ npm build
• 添加並提交更改
• 將您的提交推送到您的分叉倉庫
• 將您的分叉存儲庫克隆到您的項目並使用您構建的 ckeditor。

這不是直截了當的，關於它的文檔充其量是不存在的。 我的痛苦是你的收獲<3

額外的

在線構建工具讓您下載 a.zip，我所做的是用 zip 形式的文件覆蓋了我的分叉項目文件。 我構建、上傳等。請注意，工具欄的配置位於 sample/index.html 中，如果您不添加它，那么您將看不到您的工具欄。

記住一定要添加工具欄配置！

** 編輯 **

如果你在一個團隊中工作，你會想要 go 版本在頂部。

更簡單

• 使用在線構建工具
• 將 zip 下載到您的項目中
• go 到 git 和npm install
• 編輯您的ckeditor.js以包含來自sample/index.html的配置（我將所有內容都放在了Editor.defaultConfig中）
• 在同一文件夾中運行npm build
• go 到您的主項目並從您剛剛制作的構建中導入 ckeditor 例如import ClassicEditor from './online-build/build/ckeditor';
• 在項目文件夾中運行npm build

如果除了您沒有工具欄外一切正常，那么您需要重新檢查您的配置設置。

干杯!

** 編輯 **

我想添加似乎不太支持的“源代碼編輯”插件。 我所做的是手動從ckeditor5 主 git中獲取源代碼編輯代碼（所有插件都列在底部），然后將該代碼粘貼到我的項目中並從該文件夾中導入。 這很漂亮，不適合團隊但它有效 - 祝你好運

import SourceEditing from './ckeditor5-source-editing/src/sourceediting.js';