webpack - 将 CKEditor 集成到 Shopware 6
问题描述
我正在尝试将 CKEditor 集成到 Shopware 6 中,因为我想更好地控制文本编辑器,并在 Concrete 5 / Concrete CMS 项目中使用它。
我找到了如何将第三方依赖项 javascript 添加到 Shopware 6但我无法解决我的问题。
我添加了一个package.json
文件:
{
"name": "administration",
"version": "1.0.0",
"private": true,
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"license": "ISC",
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^29.2.0",
"@ckeditor/ckeditor5-autoformat": "^29.2.0",
"@ckeditor/ckeditor5-basic-styles": "^29.2.0",
"@ckeditor/ckeditor5-block-quote": "^29.2.0",
"@ckeditor/ckeditor5-build-classic": "^29.2.0",
"@ckeditor/ckeditor5-cloud-services": "^29.2.0",
"@ckeditor/ckeditor5-code-block": "^29.2.0",
"@ckeditor/ckeditor5-dev-utils": "^25.4.2",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^25.4.2",
"@ckeditor/ckeditor5-easy-image": "^29.2.0",
"@ckeditor/ckeditor5-editor-classic": "^29.2.0",
"@ckeditor/ckeditor5-essentials": "^29.2.0",
"@ckeditor/ckeditor5-font": "^29.2.0",
"@ckeditor/ckeditor5-heading": "^29.2.0",
"@ckeditor/ckeditor5-horizontal-line": "^29.2.0",
"@ckeditor/ckeditor5-html-support": "^29.2.0",
"@ckeditor/ckeditor5-image": "^29.2.0",
"@ckeditor/ckeditor5-indent": "^29.2.0",
"@ckeditor/ckeditor5-link": "^29.2.0",
"@ckeditor/ckeditor5-list": "^29.2.0",
"@ckeditor/ckeditor5-media-embed": "^29.2.0",
"@ckeditor/ckeditor5-paragraph": "^29.2.0",
"@ckeditor/ckeditor5-paste-from-office": "^29.2.0",
"@ckeditor/ckeditor5-source-editing": "^29.2.0",
"@ckeditor/ckeditor5-theme-lark": "^29.2.0",
"@ckeditor/ckeditor5-word-count": "^29.2.0",
"raw-loader": "^4.0.2",
"style-loader": "^1.3.0",
"webpack": "^5.52.0",
"webpack-cli": "^4.8.0"
}
}
并添加了一个webpack.config.js
对于 CKEditor 来说是最低限度的:
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const {join, resolve} = require('path');
module.exports = function (params) {
return {
resolve: {
alias: {
'@ckeditor': resolve(
join(__dirname, '..', 'node_modules', '@ckeditor')),
}
},
module: {
rules: [
{
test: /\.svg$/,
include: [
`${params.basePath}Resources/app/administration/node_modules`
],
use: [ 'raw-loader' ]
},
{
test: /\.css$/,
include: [
`${params.basePath}Resources/app/administration/node_modules`
],
use: [
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
]
}
]
}
};
};
但是每次我运行时./psh.phar administration:build
,我都会收到此错误:
ERROR in /../src/Resources/app/administration/node_modules/@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--10-2!/.../src/Resources/app/administration/node_modules/@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css' in '/.../src/Resources/app/administration/node_modules/@ckeditor/ckeditor5-ui/theme/components/responsive-form'
我已经检查过了,它就在那里,因此假设应该找到该模块,因为它正在寻找正确的位置。将任何东西集成到 Shopware 6 中时,是否有其他人遇到过这个问题?或者任何人都可以就如何最好地解决这个问题提出一些建议?谢谢。
解决方案
您是否可以选择使用预先构建的 CKEditor(文档中的场景 1)?或者你真的必须从源代码构建 CKEditor 吗?
如果您可以使用预构建包,这将起作用:
example.com/custom/plugins/ExampleModule/src/Resources/app/administration$
npm install --save @ckeditor/ckeditor5-build-classic
然后在你的main.js
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
构建(生产模板):
example.com$
bin/build-administration.sh
由于您似乎使用了开发模板(我在生产模板中对其进行了测试),您的步骤可能略有不同。
推荐阅读
- flutter - 视频播放器颤动的问题
- rust - 在公共函数中使用私有类型的最佳方式是什么?
- php - 尝试将自定义项添加到特定的 WordPress 菜单项位置但失败
- xcode - 使用 xcode 上传存档:前缀或后缀无效
- python - 错误:预期的 pk 值,收到的外键字段列表
- java - Scoped Variables 和 WeakReferences 奇怪地交互 - 一些对象没有被垃圾收集
- ruby-on-rails - Phusion 乘客是否重用流程?
- node.js - 如何获取 Firebase 的数据库键和值
- c++ - 在 C++14 中避免字段零初始化
- angular - Web 应用程序 - 浏览器/计算机识别