Wednesday 9 August 2023

How correctly to import visao/ckeditor5-video plugin?

I use ckeditor 38 in Laravel 8 / jquery 3.6.0 app and I added https://github.com/Technologie-Visao/ckeditor5-video plugin(28.0.1)

But I failed to add it into my app.js file, as when I added import Video :

import Video from "@visao/ckeditor5-video/src/video.js";

const ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
ClassicEditor
    .create(document.querySelector('#content_editor'), {
        plugins: [Video],
        video: {           // video properties
            upload: {
                types: ['mp4'],
                allowMultipleFiles: false,
            },
        },
        extraPlugins: [ NewUploadAdapterPlugin ]  // I also have images plugin inserted
    })

But in browser's console I got error :

app.js?id=a3275a152c6ddc2953f0f639d1375f5f:16 Uncaught CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules
    at app.js?id=a3275a152c6ddc2953f0f639d1375f5f:16:390578
    at app.js?id=a3275a152c6ddc2953f0f639d1375f5f:16:1127587
    at app.js?id=a3275a152c6ddc2953f0f639d1375f5f:16:1127603
    at app.js?id=a3275a152c6ddc2953f0f639d1375f5f:16:36
    at ./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js

I cannot comment like with const ClassicEditor = ...

As I got :

ReferenceError: ClassicEditor is not defined

error ...

Which is valid code to import ?

UPDATED BLOCK :

At this https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html#requirements page I read :

When installing CKEditor 5 Framework packages, you need to make sure their versions match the version of the base editor package. For example: if you would like to install the @ckeditor/ckeditor5-alignment package and your other packages are outdated, e.g. at version 38.0.0, you should consider updating your editor and all other packages to the latest 39.0.0 version. You might also install the alignment package at version 38.0.0 (which is not advised, actually). Otherwise, if package versions are different, this will result in an ckeditor-duplicated-modules error.

The simplest way to avoid such situations is to always use the latest 39.0.0 versions of the official packages. If you already stumbled upon this error, you can use npm-check-updates, which is a handy tool for keeping your packages up to date.

In package.json I have :

"devDependencies": {
    "@visao/ckeditor5-video": "^28.0.1",

"dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^38.0.1",

Looks like as https://github.com/Technologie-Visao/ckeditor5-video has 2 years of last - so update there is no way to install it under ckeditor/ckeditor5-build-classic 38.0.1 ?

So I changed :

"dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^28.0.0",

Next Totally removed package-lock.json and node_modules and run

npm install

and

npm run watch-poll

But anyway I got errors :

app.js?id=d45135773663b89e3badb99a4913df66:14 Uncaught CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
    at Object.<anonymous> (app.js?id=d45135773663b89e3badb99a4913df66:14:8607)
    at Object.<anonymous> (app.js?id=d45135773663b89e3badb99a4913df66:14:8681)
    at i (app.js?id=d45135773663b89e3badb99a4913df66:14:3715)
    at Module.<anonymous> (app.js?id=d45135773663b89e3badb99a4913df66:14:115934)
    at i (app.js?id=d45135773663b89e3badb99a4913df66:14:3715)
    at app.js?id=d45135773663b89e3badb99a4913df66:14:4514
    at app.js?id=d45135773663b89e3badb99a4913df66:14:4525
    at app.js?id=d45135773663b89e3badb99a4913df66:14:3574
    at ./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js (app.js?id=d45135773663b89e3badb99a4913df66:14:3580)
    at __webpack_require__ (app.js?id=d45135773663b89e3badb99a4913df66:125260:42)

I opened composer.lock and check :

 "": {
    "dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^28.0.0",
        ...
    },
    "devDependencies": {
        "@visao/ckeditor5-video": "^28.0.0",
        ...
    }


...

"node_modules/@ckeditor/ckeditor5-build-classic": {
    "version": "28.0.0",
    "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-28.0.0.tgz",
    "integrity": "sha512-VgOGAMC9/47HZTgA4vnzhYfNCYRYzukXuS873B0gQ9cenP13CnYzwa1y9H/Przo4r5sYUPsNsLCG1i5eM58JWg==",
    "dependencies": {
        "@ckeditor/ckeditor5-adapter-ckfinder": "^28.0.0",
        "@ckeditor/ckeditor5-autoformat": "^28.0.0",
        "@ckeditor/ckeditor5-basic-styles": "^28.0.0",
        "@ckeditor/ckeditor5-block-quote": "^28.0.0",
        "@ckeditor/ckeditor5-ckfinder": "^28.0.0",
        "@ckeditor/ckeditor5-cloud-services": "^28.0.0",
        "@ckeditor/ckeditor5-easy-image": "^28.0.0",
        "@ckeditor/ckeditor5-editor-classic": "^28.0.0",
        "@ckeditor/ckeditor5-essentials": "^28.0.0",
        "@ckeditor/ckeditor5-heading": "^28.0.0",
        "@ckeditor/ckeditor5-image": "^28.0.0",
        "@ckeditor/ckeditor5-indent": "^28.0.0",
        "@ckeditor/ckeditor5-link": "^28.0.0",
        "@ckeditor/ckeditor5-list": "^28.0.0",
        "@ckeditor/ckeditor5-media-embed": "^28.0.0",
        "@ckeditor/ckeditor5-paragraph": "^28.0.0",
        "@ckeditor/ckeditor5-paste-from-office": "^28.0.0",
        "@ckeditor/ckeditor5-table": "^28.0.0",
        "@ckeditor/ckeditor5-typing": "^28.0.0"
    },
    "engines": {
        "node": ">=12.0.0",
        "npm": ">=5.7.1"
    }
},

...

"node_modules/@visao/ckeditor5-video": {
    "version": "28.0.1",
    "resolved": "https://registry.npmjs.org/@visao/ckeditor5-video/-/ckeditor5-video-28.0.1.tgz",
    "integrity": "sha512-1w2HyfirebuIq8Wqt9x4Hy2wMSaJC75YIlQCq5ZIJc0Z3WUCPxr9n+M9czs/oLmasa+bOWCzcZjzpZfPRyd6Vg==",
    "dev": true,
    "dependencies": {
        "@ckeditor/ckeditor5-ui": "^28.0.0",
        "ckeditor5": "^28.0.0"
    },
    "engines": {
        "node": ">=12.0.0",
        "npm": ">=5.7.1"
    }
},

I expected that downgrading of version ckeditor5-build-classic till 28.0 will fix this error, but I failed...

UPDATED BLOCK # 2: I found package https://www.npmjs.com/package/@zhufusheng/ckeditor5-video, which is Last publish 9 months ago, but again compiling project with packages :

"dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^35.0.0",
    "@zhufusheng/ckeditor5-video": "^35.2.2",

and with code :

import Video from "@zhufusheng/ckeditor5-video/src/video"
...
const ClassicEditor = require('@ckeditor/ckeditor5-build-classic')

ClassicEditor
    .create(document.querySelector('#content_editor'), {
        plugins: [Video],
        vide: {
            upload: {
                types: ['mp4'],
                allowMultipleFiles: false,
            },
        },
        extraPlugins: [ NewUploadAdapterPlugin ]
    })

I got the same erro :

app.js?id=d116dabf1545386811d197adc4a998f3:16 Uncaught CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules
    at app.js?id=d116dabf1545386811d197adc4a998f3:16:311177
    at app.js?id=d116dabf1545386811d197adc4a998f3:16:1002139
    at app.js?id=d116dabf1545386811d197adc4a998f3:16:1002155
    at app.js?id=d116dabf1545386811d197adc4a998f3:16:36
    at ./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js (app.js?id=d116dabf1545386811d197adc4a998f3:16:42)

Not sure, but seems zhufusheng/ckeditor5-video is latest version of Technologie-Visao/ckeditor5-video I used firstly:



from How correctly to import visao/ckeditor5-video plugin?

No comments:

Post a Comment