问题
I come you ask your help because I develop a project with Jhipster framework (Angular 10 + Spring boot) and I have need a file manager. So I chose Ckfinder, the server side in java works well but client side not.
I don't have find another package of ckfinder for angular that 'ckeditor5-ckfinder'. So I have install the ckeditor 5 and ckfinder :
npm install --save @ckeditor/ckeditor5-angular
npm install --save @ckeditor/ckeditor5-build-classic
npm install --save @ckeditor/ckeditor5-ckfinder
And I load ckeditor in my component with :
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
But not work because 'Could not find a declaration file for module' I try to create it with 'Strict mode project tips' in official doc ckeditor but module not export, so I add export before declare and webpack said :
ERROR in ./src/main/webapp/app/shared/util/ckeditor-util.ts
Module not found: Error: Can't resolve './typings' in 'C:\Cublux\service\gateway\src\main\webapp\app\shared\util'
i 「wdm」: Failed to compile.
So I have used this code :
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
And Ckeditor 5 work perfectly without error. So I have follow the official doc of ckfinder and I have do the same thing for ckfinder package :
// eslint-disable-next-line @typescript-eslint/no-var-requires
const CKFinder = require('@ckeditor/ckeditor5-ckfinder/src/ckfinder');
However I occured an error with webpack :
error in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/button.css
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> @import "../../mixins/_unselectable.css";
| @import "../tooltip/mixins/_tooltip.css";
|
Do I have to add a configuration to the webpack loader? Or this is a compatibility error between angular 10 and ckfinder? Thanks to say me if I have skip a step or if I not the good method to do work ckfinder.
I have find another idea for not to use the angular package but I have a problem with csrf token of spring boot look this.
Don't hesitate if you want more details. Thank you for your help.
Solution
For this problem :
ERROR in ./src/main/webapp/app/shared/util/ckeditor-util.ts
Module not found: Error: Can't resolve './typings' in 'C:\Cublux\service\gateway\src\main\webapp\app\shared\util'
i 「wdm」: Failed to compile.
After create a type file (Ex: src/types/typings.d.ts) with :
declare module '@ckeditor/ckeditor5-build-classic' {
const ClassicEditor: any;
export default ClassicEditor;
}
You must declare in tsconfig.app.json :
"include": [
"src/**/*.d.ts"
]
The official documentation is not complete the 'include' is missing.
For this problem :
error in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/button.css
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> @import "../../mixins/_unselectable.css";
| @import "../tooltip/mixins/_tooltip.css";
|
You must install this dependencies :
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
postcss-loader@3 \
raw-loader@3 \
style-loader@1 \
And add configuration to your loader in webpack.common.js :
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
....
module: {
rules: [
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: [ 'raw-loader' ]
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
attributes: {
'data-cke': true
}
}
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
},
]
}
]
}
For more details look the doc
Finaly the compiler not occured errors but another errors are appeared on the js console when I use the plugin with the ClassicEditor. So I recommand you to use the builder of ckeditor which works perfectly. I think that ckeditor plugins is not ready to works with angular... is not present in the documentation.
So I have not use ckedtior 5 but ckeditor 4 which is more easy to integrate and works with ckfinder. I have found a solution for my other idea look this.
来源:https://stackoverflow.com/questions/64948581/error-integration-ckeditor-and-ckfinder-with-angular-10-jhipster