Syntax Error: Error: Failed to load config "ckeditor5" to extend from. While importing CKEditor to Vuejs
Syntax Error: Error: Failed to load config "ckeditor5" to extend from. While importing CKEditor to Vuejs
大家好,我现在遇到了一个问题。我正在尝试自定义构建,因此在 ckeditor(我克隆的)中一切正常,sample.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.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>
感谢您的阅读,如有任何帮助,我们将不胜感激
所以这个弹出窗口是因为我的 package.json 和 ckeditor5(我分叉的)中的 ESLint 版本不同。
无论如何,如果你想像我一样建立一个自定义
- 分叉所有的回购协议。
- 创建您的自定义构建,但不要将其推送到您分叉的存储库中。
- 而是创建一个新的存储库,将您的自定义构建推送到那里。
- 通过
安装
npm i <your-github-name>/<your-repo-name>#<your-branch>
大家好,我现在遇到了一个问题。我正在尝试自定义构建,因此在 ckeditor(我克隆的)中一切正常,sample.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.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>
感谢您的阅读,如有任何帮助,我们将不胜感激
所以这个弹出窗口是因为我的 package.json 和 ckeditor5(我分叉的)中的 ESLint 版本不同。
无论如何,如果你想像我一样建立一个自定义
- 分叉所有的回购协议。
- 创建您的自定义构建,但不要将其推送到您分叉的存储库中。
- 而是创建一个新的存储库,将您的自定义构建推送到那里。
- 通过 安装
npm i <your-github-name>/<your-repo-name>#<your-branch>