How to add linking images to ckeditor in React?

Question

I want to add Linking images feature to my React app that uses '

@ckeditor/ckeditor5-build-decoupled-document

code:

import React from 'react'
import { CKEditor } from "@ckeditor/ckeditor5-react";
import * as  DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";

but when I import:

import linkimage from '@ckeditor/ckeditor5-link/src/linkimage';

I get an error:

Uncaught CKEditorError: ckeditor-duplicated-modules

more info about images linking

How can I add linking images?

Answer 1

I assume you have done:

npm install --save @ckeditor/ckeditor5-image

and enabled the plugin with:

import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';

then add this into your editor config:

image: {
    toolbar: [
        'imageStyle:block',
        'imageStyle:side',
        '|',
        'toggleImageCaption',
        'imageTextAlternative',
        '|',
        'linkImage' <---- here
    ]
}

even if the error still persist, try the error code docs for it here

Packages were duplicated in node_modules

In some situations, especially when calling npm install multiple times, it may happen that npm will not correctly "deduplicate" packages.

Normally, npm deduplicates all packages so, for example, @ckeditor/ckeditor5-core is installed only once in node_modules/. However, it is known to fail to do so from time to time.

We recommend checking if any of the steps listed below help:

    rm -rf node_modules && npm install to make sure you have a clean node_modules/ directory. This step is known to help in most cases.
    If you use yarn.lock or package-lock.json, remove it before npm install.
    Check whether all CKEditor 5 packages are up to date and reinstall them if you changed anything (rm -rf node_modules && npm install).