Error Integration CkEditor and CkFinder with Angular 10 (Jhipster)

南楼画角 提交于 2021-01-07 06:34:38

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!