Build from source on version 43.0.0

[batistellabr]

Hello,

I download the source code from v43.0.0. from github: https://github.com/ckeditor/ckeditor5/archive/refs/tags/v43.0.0.tar.gz

Then I simply ran "npm install" in the root folder.

There was an error:

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: dev @ckeditor/ckeditor5-mermaid@"ckeditor/ckeditor5-mermaid#v0.0.3" from the root project
npm error
npm error Could not resolve dependency:
npm error dev @ckeditor/ckeditor5-mermaid@"ckeditor/ckeditor5-mermaid#v0.0.3" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

I tried to search for documentation on how to build from source, but I only found the legacy info. Is there a manual on how to build from source? I need that because Im devloping a custom plugin and I need to integrate it with CK Editor.

Thank you.

[Witoso]

Hi! Use either npm install --legacy-peer-deps or yarn. We can only guarantee fully yarn as this is the one we are using. We plan to incorporate mermaid into the main repo soon, but I don't have a specific timeline for this.

I need that because Im devloping a custom plugin and I need to integrate it with CK Editor.

Using editor from source is definitely not needed to develop custom plugins, could you specify your use case?

[batistellabr]

Thank you for you answer.

My use case is the following: Im writing a custo plugin and I need that new plugin to be avaiable in my web application. My web application is a simple web app which does not use npm or any other package system. I just need to import the .js file using HTML script tags. I tought I needed to build CKEditor from source with my plugin as a dependency in order to use it in my app. If there is another strategy to do that its more than welcome. Please, could you share the way?

Thank you.

[Witoso]

Two similar solutions:

1. Using the CDN (UMD build).
2. Downloading the ZIP from the website.

In your case, the best way would be to use globals. The CDN provides them under https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.umd.js, ZIP uses *.umd.js as well.

After loading the scripts, the CKEDITOR global is available, and everything can be "imported" from it.

const  {
                ClassicEditor,
                Essentials,
                Paragraph,
                Bold,
                Italic,
                Font
            } = CKEDITOR;

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
                    toolbar: [
						'undo', 'redo', '|', 'bold', 'italic', '|',
						'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                    ]
                } )
                .then( editor => {
                    window.editor = editor;
                } )
                .catch( error => {
                    console.error( error );
                } );

As well as classes to create your own plugins:

const { Plugin } = CKEDITOR;

---

We are actually writing more docs about this apporach, so stay tuned. Hope this helps.

[batistellabr]

Thank you for you answer. It helps me a lot. But how to make my plugin avaialble for my web app? I just need to put the plugin build file (.js file) available (e.g. script tag) and import the plugin in CKEDitor instance to be created?

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).