語法錯誤：錯誤：無法加載要擴展的配置“ckeditor5”。 將 CKEditor 導入 Vuejs 時

Question

大家好，所以目前我遇到了一個問題。 我正在嘗試自定義構建，因此在 ckeditor （我克隆的）樣本中一切正常。html 也可以正常工作。 但是當我嘗試在 Vue 2 中實現自定義構建時，我得到了類似標題的錯誤（順便說一句，原始作品還可以，就像經典構建一樣）。

Syntax Error: Error: Failed to load config "ckeditor5" to extend from.
Referenced from: C:\Users\nam\Desktop\CKEditorLib\ckeditor5\.eslintrc.js
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at _normalizeObjectConfigData.next (<anonymous>)

我不知道為什么引用的錯誤來自庫，而不是我安裝的 package。 這是我的 package.json

"@ckeditor/ckeditor5-adapter-ckfinder": "^24.0.0",
    "@ckeditor/ckeditor5-alignment": "^24.0.0",
    "@ckeditor/ckeditor5-autoformat": "^24.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^24.0.0",
    "@ckeditor/ckeditor5-block-quote": "^24.0.0",
    "@ckeditor/ckeditor5-build-custom": "file:../../CKEditorLib/ckeditor5/packages/ckeditor5-build-custom",
    "@ckeditor/ckeditor5-ckfinder": "^24.0.0",
    "@ckeditor/ckeditor5-core": "^24.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^20.0.0",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^23.6.1",
    "@ckeditor/ckeditor5-easy-image": "^24.0.0",
    "@ckeditor/ckeditor5-editor-classic": "^24.0.0",
    "@ckeditor/ckeditor5-essentials": "^24.0.0",
    "@ckeditor/ckeditor5-heading": "^24.0.0",
    "@ckeditor/ckeditor5-image": "^24.0.0",
    "@ckeditor/ckeditor5-indent": "^24.0.0",
    "@ckeditor/ckeditor5-link": "^24.0.0",
    "@ckeditor/ckeditor5-list": "^24.0.0",
    "@ckeditor/ckeditor5-media-embed": "^24.0.0",
    "@ckeditor/ckeditor5-paragraph": "^24.0.0",
    "@ckeditor/ckeditor5-paste-from-office": "^24.0.0",
    "@ckeditor/ckeditor5-table": "^24.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^24.0.0",
    "@ckeditor/ckeditor5-typing": "^24.0.0",
    "@ckeditor/ckeditor5-vue2": "^1.0.5",
    "core-js": "^3.6.5",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^0.5.1",
    "style-loader": "^1.2.1",
    "terser-webpack-plugin": "^3.0.2",
    "vue": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"

這是.vue文件中的代碼，一件事

<template>
  <div class="hello">
    <ckeditor 
      :editor="editor" 
      v-model="editorData" 
      :config="editorConfig">
    </ckeditor>
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-custom/src/ckeditor'
//Same error happened if i try to import ClassicEditor from /buid/ckeditor

export default {
  name: 'HelloWorld',
  data() {
    return {
        editor: ClassicEditor,
        editorData: '<p>Content of the editor.</p>',
        editorConfig: {
            // The configuration of the editor.
        }
    };
  }
}
</script>

感謝您閱讀，將不勝感激任何幫助

Answer 1

因此，由於我的 package.json 和 ckeditor5（我分叉）中 ESLint 的沖突版本，此彈出窗口是不同的。

無論如何，如果你想建立一個像我一樣的定制

1. 分叉所有回購。
2. 創建您的自定義構建，但不要將其推送到您分叉的存儲庫中。
3. 相反，創建一個新的存儲庫，將您的自定義構建推送到那里。
4. 通過安裝它

npm i <your-github-name>/<your-repo-name>#<your-branch>