Ported CKEditor 5

to test this, apply the patches above and run the included script: build_ckeditor5.sh

please provide feedback.

Hi, thanks for your effort.

Here is my feedback:

1. build_ckeditor5.sh script is not fully working. - I've got a couple of errors related to the wrong path to different files (like error tsconfig.types.json:2:13 - error TS6053: File 'ckeditor5/tsconfig.json' not found). I was able to fix it manually
2. After running a script there is no README.md file, which is required to determine the version. The only way I found is to download the CKEditor from the https://ckeditor.com/ckeditor-5/download/ and manually add the README.md from the downloaded version.
3. wysiwyg_ckeditor5_version function does not return correctly the version, due to the regexp preg_match('% build v([0-9.]*)/%', $library, $matches);. Fixed by removing the / at the end of regexp

After all the above I was able to add it to the page admin/config/content/wysiwyg and use it. After all, the CKEditor is loaded, but without the full buttons bar ( probably it is some misconfiguration from my side.

The same result after applying the patch to the module and just downloading the library from the https://ckeditor.com/ckeditor-5/download/ page.

One more open question - how to make the image upload button work for the CKEditor 5? (Previously drupal media browser opens when we click to image upload button in CKEditor toolbar)

Since CKEditor 4 is EOL in June 2023 we should update the IS to reflect this. This is not only because it is newer and better, it also is an security concern.

Ref: https://ckeditor.com/blog/ckeditor-4-end-of-life/

Hi,

I'm looking at whether to move to CKeditor 5 on Drupal 7.

Do people have this working on live sites?

I believe we have till the end of the year on CKeditor 4 using the standalone ckeditor contrib module, but this looks like it might be the best route forward if we want to continue using CKeditor on Drupal 7 next year.

We just got an quotation from https://ckeditor.com/ on 4.x support on a yearly contract. It is expensive, I mean really expensive. We are considering spending the money on developer time getting CK5 supported here in stead.

@steinmb
My colleague consulted CKEditor also for support and yes, we got a really expensive price back too. Price looks to be based on number of installs multiplied by number of active users. We have a D7 site with 4500 active users (development for a D10 version is in progress).

I managed to get a basic CKEditor 5 working with patch "wysiwyg_ckeditor5-3123281-6.patch" from #7 and with change 3 from #12 applied:

wysiwyg_ckeditor5_version function does not return correctly the version, due to the regexp preg_match('% build v([0-9.]*)/%', $library, $matches);. Fixed by removing the / at the end of regexp

Instead of using the build script provided by @joseph.olstad in #7 I got CKEditor 5 working by using a custom CKEditor5 build.

1. I went to https://ckeditor.com/ckeditor-5/online-builder/
2. Removed "CKBox", "Cloud Services", "Indent".
3. Added "Horizontal Line", "Remove format", "Source Editing", "Strikethrough", "Subscript", "Superscript", "Underline". (You can add/remove other plugins than that I did.)
4. Configured the toolbar as I would like it to be.
5. Chose a language.
6. Download.

Next step for me to figure out is how I could add CodeMirror to it. I think that CodeMirror makes source editing much more user friendly.

I forgot to document a few steps:

7. Created a directory called 'ckeditor5'.
8. Put the contents of the directory 'build' in it + README.md.
9. To the README.md I added the following lines on top of it (because these look like be parsed by wysiwyg_ckeditor5_version()):

CKEditor 5 classic editor build v40.0.0
=======================================

10. The directory 'ckeditor5' I put into sites/all/libraries.

Thank you for the detailed feedback, will try to follow your workflow. Note: CK4 we up to now we install by using composer, example: "ckeditor/ckeditor": "dev-full/4.21.x" giving maintainers more control of libraries floating around in libraries.

@MegaChriz, thanks for this, @steinmb, if you have an update to the patch from #7 that'd be great

With that said, if someone wants to take another angle at this, perhaps create a new ckeditor5 drupal 7 module backported from backdrop. This might be the simplest way to get a nice ckeditor5 experience for Drupal 7, borrow from the backdrop folks which have been heavily borrowing from Drupal.

https://github.com/backdrop-contrib/ckeditor5

#3364362-02: CKEditor 5 support →

I'm linking to an issue in the media_ckeditor project

For another approach, see the link

Hi @driverok

For me also CKEditor is loaded, but without the full buttons bar.
Have you found the root cause.
Let me know how full buttons bar can be achieved so that I can choose from BUTTONS AND PLUGINS.

I'm working on an update of the patch and on an update of the instructions that I posted in #17/#18. I see that I missed to note that I also had edited wysiwyg/editors/js/ckeditor5.js.

@MegaChriz, thanks for your work on this and looking forward to your patch. With that said, backdrop has already solved this , someone (one of us) could likely very easily port the backdrop version of ckeditor5 back to D7 as it's api is very similar to D7

The source code is here:
https://github.com/backdrop-contrib/ckeditor5

I am suggesting making this new backported ckeditor5 module an optional sub module of the media_ckeditor module. Since I'm already the maintainer of media_ckeditor, I could easily slide this module in as a sub module of media_ckeditor once it's ready.

✨ CKEditor 5 support Active

I created an issue fork called 3123281-ckeditor5.
Starting with wysiwyg_ckeditor5-3123281-6.patch from #7, I've made the following changes:

• wysiwyg_ckeditor5_version() checks the README file to detect if a custom CKEditor build is used. If so, it takes the version number from ckeditor5/package.json. I do make the assumption here that the "Essentials" pack is always included in a custom build.
• I changed the toolbar configuration in wysiwyg/editors/js/ckeditor5.js so that it follows mostly of what is default in Drupal 10. There is now a specific check for the text format "Full HTML". Any other text format uses the fallback configuration.
• In wysiwyg_load_editor() a check is added to only include a JS library file if it exists. This change allows the library to be located at either ckeditor5/ckeditor.js or ckeditor5/build/ckeditor.js. I don't know if there's an other way to instruct wysiwyg to look for the library at more than one path.

Instructions for installing CKEditor 5

1. Obtain a CKEditor 5 build:
   

   A custom CKEditor 5 build

   1. Go to https://ckeditor.com/ckeditor-5/online-builder/
   2. Click "Classic".
   3. Choose the plugins that you want to use, for example:
      1. Remove "CKBox", "Cloud Services", "Indent".
      2. Add "Code", "Code blocks", "Horizontal line", "Remove format", "Source editing", "Strikethrough", "Subscript" and "Superscript". The usage of these plugins are currently hard-coded in wysiwyg/editors/js/ckeditor5.js.
   4. Click the button "Next step".
   5. An UI to configure the toolbar is displayed. However, the layout of the toolbar gets overridden by code in wysiwyg/editors/js/ckeditor5.js. So you can skip this step. Click the button "Next step".
   6. Choose a language for your editor and click the button "Next step".
   7. Click the "Start" button to create the custom CKEditor 5 build.
2. Unpack the download and put it in sites/all/libraries.
3. Rename the folder to 'ckeditor5'.
4. Verify that ckeditor.js is now in sites/all/libraries/ckeditor5/build/ckeditor.js (in case you obtained a custom CKEditor 5 build as described in the steps above) or sites/all/libraries/ckeditor5/ckeditor.js (in case you obtained CKEditor in an other way).
5. On your Drupal site, go to /admin/config/content/wysiwyg and assign the editor to one or more text formats.
6. Which buttons are displayed in the toolbar is currently hard-coded per text format. To customize the toolbar, edit the file wysiwyg/editors/js/ckeditor5.js.

I hope that this helps and that the instructions are clear and complete. 🙂

@joseph.olstad
Porting Backdrop's ckeditor5 module to Drupal 7 sounds like a good idea to explore 🙂. Because the solution provided here currently lacks a UI to configure the toolbar (this configuration is currently hard-coded in wysiwyg/editors/js/ckeditor5.js).

I don't know however if that would make adding CodeMirror to CKEditor 5 in Drupal 7 easier for me. The Backdrop module CKEditor CodeMirror looks like to only support CKEditor 4.

I experienced an issue that the content entered in the CKEditor on a custom form did not get saved. For some of the other editors, I saw that there was sometimes a call to contentsChanged().

I looked at the API documentation of CKEditor 5 and on https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/... I found the following code example:

editor.model.document.on( 'change:data', () => {
    console.log( 'The data has changed!' );
} );

So therefore I added the following code to wysiwyg/editor/js/ckeditor.js:

// Make sure that wysiwyg knows when content in the editor changes.
editor.model.document.on( 'change:data', () => {
  this.contentsChanged();
} )

Looks like they brought ckeditor5 into backdrop core, so perhaps compare
backdrop core ckeditor5 https://github.com/backdrop/backdrop.git
with the backdrop contrib ckeditor5
https://github.com/backdrop-contrib/ckeditor5

They both look recently maintained.

To capitalize on MegaChriz work here, one of us could create a gitlab or github project and commit all of the ckeditor library in , make this as easy as possible so that others don't have to do that step , and it will at least version control the possible regressions that could slip in with newer downloads.

add the steps above to a readme file.

This could be a version 1.x of ckeditor5

a 2.x could be the backport of the backdrop ckeditor5

Porting Backdrop's ckeditor5 module to Drupal 7 sounds like a good idea to explore

Keep in mind that Backdrop is not Drupal 7. The first include modules that latter does not include, which means that code used in a contributed module for Backdrop will not work in a contributed module for Drupal 7. For example, the following hook implementation will not work in a plain installation of Drupal 7.

function ckeditor5_form_filter_format_editor_link_form_alter(&$form, $form_state) {
  $format = $form_state['format'];
  if ($format->editor === 'ckeditor5') {
    $form['text']['#access'] = FALSE;
  }
}

Does CKEditor 4 change the mark up, so that we are locked in, and forced to keep using CKEditor 4? Or is it possible to switch to TinyMCE 6, if it got supported in the Wysisyg module?

@ressa, I don't believe there is a reason the markup generated by any editor would lock you in, assuming the editor you are switching to is has the features/plugins needed to the type of markup you have. I mean, most of the editors are supposed to be usable to generate HTML for direct display - unless you're using one of the ones outputting other formats like Markdown.

First, a massive thank you to everyone involved here!

I've not yet had time to look into the work being done here, but do want you to know that I am willing to merge in new editor integrations. I just don't have much time to actively develop anymore, and it would be great if those creating the new integrations would be willing to stick around for a while after it has been merged. It is likely we will get new support requests, and maybe bug reports, as people migrate.

Please also note that all the older editor integrations have been deprecated now and in case Wysiwyg's core needs to change to support more modern editors, it is likely we'll drop support for those editors completely. If they happen to stay working for now, that's fine, but I don't really think they're that useful anymore - especially those that barely work with best practice markup or newer browsers.
So, we should no longer need to bend over backwards to not break the API (serverside or clientside) for newer editor integrations.

@ressa
Yes, I noticed that CKEditor 5 introduced some markup changes compared to CKEditor 4:

• Italic button now outputs <i> instead of <em>.
• For tables it puts a <figure> element around it.
• When setting widths and heights of tables or table cells, CKEditor 5 outputs that as style="width: 500px; height: 300px;" instead of width="500" height="300", so it looks like allowing users to set properties for tables is off the table (pun intended), because usually I don't want users to be able to set the style attribute for anything.
• I also read that it would reformat existing html, for example replacing <em> with <i>. I still need to test that. I'm still testing the D7 site that I put CKEditor 5 on to catch regressions like the ones mentioned above.

CKEditor 4 no longer receives public security updates however, so it's a risk if you keep using that.

I also read that it would reformat existing html, for example replacing <em> with <i>. I still need to test that. I'm still testing the D7 site that I put CKEditor 5 on to catch regressions like the ones mentioned above.

I tested this and I can confirm this is the case. If you have a formatted text field that now contains <em> and you go to a node edit page where the contents of that field is loaded with CKEditor 5, even if you don't change anything in the field and only click on the "Save" button to save the node, the <em> will be replaced by <i>.

This is also the case for tables. Let's say you have the following html (previously saved on a formatted text field):

<p>This is <em>emphasized</em>.</p>
<table>
  <caption>Title</caption>
  <tr>
    <th>Foo</th>
  </tr>
  <tr>
    <td>Bar</td>
  </tr>
</table>

After saving a node where CKEditor 5 is used on the field, it becomes:

<p>This is <i>emphasized</i>.</p><figure class="table"><table><thead><tr><th>Foo</th></tr></thead><tbody><tr><td>Bar</td></tr></tbody></table><figcaption>Title</figcaption></figure>

Even when not changing anything in the field in the UI.

So if you want text to be still displayed as italics, then you would need to add <i> to the allowed html elements for the text format "filtered_html".
Same applies to if you were allowing captions on tables, that you would need to allow <figcaption>. It is a bit annoying that with CKEditor reformatting the html, captions are going to be displayed underneath the table, even if you had them displayed above the table before (as shown in the example above).

Perhaps it is configurable to what CKEditor reformats and what not. I haven't dive that deep yet.

New issues

Now that I have CKEditor 5 on Drupal 7 active for some weeks, some new issues arised:

• On the D7 site I allowed the usage of inline images in HTML using the Insert → module. That module does not work with CKEditor 5.
• CKEditor stripped out any inline images because I had not built the editor with the "Image" plugin enabled. Because the images were supposed to be added using the Insert module, I thought I didn't need the "Image" plugin. So it is recommended to built the editor with that plugin, even if you don't plan to allow image uploads with the editor.
• I had added the "Image upload" button, but it didn't upload anything for me, probably because I didn't include CKBox on my custom build. That plugin is marked premium (thus requires a paid license). There are other ways of implementing a upload adapter, however: https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/...
• Even on "Full HTML" I noticed that CKEditor was stripping out all html that isn't supported by the editor. In a new build I made sure to include the "General HTML Support" plugin. And I adjusted ckeditor5.js to allow all HTML: https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-su...

Code updates

In the updated code I added configuration to ckeditor5.js to allow all html when the text format is "full_html". You can configure yourself there if you want to allow certain html for other text formats by adjusting the contents of the "html_support" variable. See also https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-su....

Issue summary update

Because of these new insights, I updated the instructions for installing CKEditor 5 and I now have put these instructions in the issue summary.

Hello,

Following the instructions from the issue summary, I downloaded a CKEditor 5 build and extracted it in /sites/all/libraries/ckeditor5 (so I have ckeditor.js in /sites/all/libraries/ckeditor5/build/).

But when I visit /admin/config/content/wysiwyg, I only see the CKEditor 4 option:

I also tried moving the content of /sites/all/libraries/ckeditor5/build/ to the parent folder (/sites/all/libraries/ckeditor5) but with no result.

Am I missing something?

@paxrom
Did you apply the changes from the 3123281-ckeditor5 branch to the wysiwyg module?
I added this now as a step to the instructions.

@MegaChriz
Thank you for the quick reply.
No I hadn't applied the change. I will try to do it (I am not a developer) and will let you know the result.

@MegaChriz Just to confirm I can select Ckeditor5 after applying the patch. Thanks a lot!

This is great, thanks for the patch and instructions!!

I see that the ckeditor5 wysiwyg is very short. Has anyone experienced that?
Same issue that was fixed in D10 here: https://www.drupal.org/node/3330010 →

The "Rows" property of the long text field is not respected.

As any one encountered this, and fixed it?

Is it possible to use multiple customised editor builds, so that different toolbars can be used for different text input formats?

For example, a simple one on 'basic HTML' and a more complex one for 'Full HTML'?

@nicrodgers
Yes, you can use different toolbars per text format. But currently you need to edit the file wysiwyg/editors/js/ckeditor5.js for that.

A portion of that file:

  // Specify different settings for each text format.
  // Configuration for text format "Full HTML".
  if (params.format.includes("full_html")) {
    var remove_plugins_conf = [];
    var toolbar_conf = ["bold", "italic", "strikethrough", "superscript", "subscript", "removeFormat", "|", "link", "|", "bulletedlist", "numberedlist", "|", "blockQuote", "imageupload", "insertTable", "horizontalLine", "|", "heading", "codeBlock", "|", "sourceEditing"];
    var heading_conf = {
      options: [
        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
      ]
    };

    // Do no strip out any html. Requires "General HTML Support" plugin.
    // @see https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html#enabling-all-html-features
    var html_support = {
      allow: [
        {
            name: /.*/,
            attributes: true,
            classes: true,
            styles: true
        }
      ]
    };
  }
  // Configuration for other text formats (including "Filtered HTML").
  else {
    var remove_plugins_conf = [];
    var toolbar_conf = ["bold", "italic", "|", "link", "|", "bulletedlist", "numberedlist", "|", "blockQuote", "imageupload", "|", "heading", "code", "|", "sourceEditing"];
    var heading_conf = {
      options: [
        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
      ]
    };

    // Configure here which additional html is allowed. Requires "General HTML
    // Support" plugin.
    // @see https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html
    var html_support = [];
  }

If you for example need to have toolbars for 3 text formats, you would add a else if block, as follows:

  // Specify different settings for each text format.
  // Configuration for text format "Full HTML".
  if (params.format.includes("full_html")) {
    // (...)
  }
  // Configuration for text format "Basic HTML".
  else if (params.format.includes("basic_html")) {
    // (...)
  }
  // Configuration for other text formats (including "Filtered HTML").
  else {
    // (...)
  }

@nicrodgers
I don't think it is possible to use multiple different CKeditor builds however. I think you would need to create one build that has the maximum number of features that you require and then you would need to limit the buttons that are displayed for text formats that have restrictions (by editing wysiwyg/editors/js/ckeditor5.js as shown in the comment above).

Thanks @MegaChriz - that's really helpful. I'll give it a go. How do I find out the 'toolbar_conf' value for each plugin in ckeditor that I want to reference?

For example, 'bold' and 'italic' are obvious, but how would I find out the value for 'inline image' or 'media embed' or 'table properties' ?

@nicrodgers

Button machine names

I looked at the config file of the toolbar in Drupal 10 first and I could find some names of buttons there.

For example, editor.editor.full_html.yml:

    items:
      - bold
      - italic
      - strikethrough
      - superscript
      - subscript
      - removeFormat
      - '|'
      - link
      - '|'
      - bulletedList
      - numberedList
      - '|'
      - blockQuote
      - drupalInsertImage
      - insertTable
      - horizontalLine
      - '|'
      - heading
      - codeBlock
      - '|'
      - sourceEditing

But I see that when building the editor on ckeditor.com, you could see the names of the buttons in the source code as well (in the data-button attribute):

And in the built editor, in src/ckeditor.ts, I can see some button names as well:

	public static override defaultConfig: EditorConfig = {
		toolbar: {
			items: [
				'heading',
				'|',
				'bold',
				'italic',
				'underline',
				'strikethrough',
				'superscript',
				'subscript',
				'removeFormat',
				'|',
				'bulletedList',
				'numberedList',
				'|',
				'undo',
				'redo',
				'|',
				'link',
				'insertTable',
				'specialCharacters',
				'|',
				'sourceEditing'
			]
		},

I also found this page where some button names can be seen: https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html
That page also says:

A full list is defined in editor.ui.componentFactory and can be listed using the following snippet: Array.from( editor.ui.componentFactory.names() ).

But I haven't tried to use that.

Table properties

Finally, "Table properties" is a plugin you can enable on the CKEditor builder:

It doesn't give you an extra button in the toolbar, but instead you get extra UI elements on a table in the editor:

@nicrodgers
About table properties: note that CKEditor 5 outputs these settings in a "style" attribute. If I'm not mistaken, that attribute gets removed on text formats where you enabled the "Limit allowed HTML tags" filter. So you may find out that you don't want to use the "Table properties" plugin. Or you would need to use a filter that also limits allowed html tags, but allows the "style" attribute on the "table" html element (and perhaps a few other html elements too).

@MegaChriz
Thanks so much for your help. I've managed to configure the toolbar with the buttons I want on each different text input format.

The styles dropdown is empty however, it's not picking up styles from the site (like it did with ckeditor 4). Has anyone managed to get this working?

Here's a link to the MR generated patch.
https://git.drupalcode.org/project/wysiwyg/-/merge_requests/6.patch

I've spotted a bug with this patch - I don't think it's specific to our site, but if someone else could test it and confirm if they can replicate it too that'd be great.

Steps to reproduce:
1. Go to /node/add/page
2. On a field that uses Ckeditor5 (eg. body field), change the default text format from Basic HTML to Full HTML
3. Enter some text in the body field
4. Save the node

Actual Result:
The body field text is not saved or displayed.

Expected Result:
The body field text should be saved and displayed.

Notes:
It doesn't seem specific to the Full HTML input format. The problem seems to occur simply by changing the text format from the default on page load to anything else. For example, if the default input format is Full HTML, you can add text and it works fine. But if you change it from Full HTML to basic (before entering any content) then it doesn't save or display.

@nicrodgers (#50) - I'm not experiencing this issue.

I've gone through the migration process as described by @megachriz (thank you).

The last thing that is giving me trouble is getting the image upload button to work. I'd rather not pay for the CKBox or CKFinder plugins. Has anyone gotten the "Simple upload adapter" to work? https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/...

I haven't yet fully dived into it, but it doesn't look all that simple to implement. If I'm able to figure it out, I'll share what I learned here.

Spent some more time looking into implementing an image upload adapter and it's beyond me. If you want to upgrade to CKEditor 5 and be able to upload images inline with content, you'll need to figure this piece out. At this time, I can't find any modules or code that solves the problem.

@davedg629, are any filtering modes enabled for your text format? I haven't tried the ck5 patch lately but have you tested with an unlocked markup mode like no filtering enabled at all?

@Joseph.olstad - No, I haven't tried it without any filters. And I'm not getting any js errors in the console.

ya try again with an unfettered full html no html element/attribute filtering, then from there, if it works, you'll at least know it's related to filtering.

@Joseph.olstad - This has nothing to do with filters. The image upload button needs an "image upload adapter" to actually upload the file somewhere and return a URL that can then be displayed by the editor.

Hi, @joseph.olstad!
I follow your steps in #7 but I get this when trying to run the build script:

sh-4.2# ./build_ckeditor5.sh
Cloning into 'ckeditor5-math'...
remote: Enumerating objects: 573218, done.
remote: Counting objects: 100% (1495/1495), done.
remote: Compressing objects: 100% (668/668), done.
remote: Total 573218 (delta 940), reused 1279 (delta 818), pack-reused 571723
Receiving objects: 100% (573218/573218), 538.82 MiB | 25.11 MiB/s, done.
Resolving deltas: 100% (386510/386510), done.
Updating files: 100% (8062/8062), done.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: ckeditor5@42.0.0
npm ERR! Found: dev @ckeditor/ckeditor5-mermaid@"ckeditor/ckeditor5-mermaid#v0.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @ckeditor/ckeditor5-mermaid@"ckeditor/ckeditor5-mermaid#v0.0.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2024-07-10T17_44_51_133Z-debug-0.log
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: ckeditor5@42.0.0
npm ERR! Found: dev @ckeditor/ckeditor5-mermaid@"ckeditor/ckeditor5-mermaid#v0.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @ckeditor/ckeditor5-mermaid@"ckeditor/ckeditor5-mermaid#v0.0.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

Do you know if I am doing something wrong?

Regards,
Jordi
JOINSO

Also, note that https://ckeditor.com/ckeditor-5/online-builder/ now does not build a download.
So, we need to create some instructions to install Ckeditor5 without npm.
There a lot of sites that does not have this preliminary steps.
I think that is possible.

Hi JOINSO, yes it looks like npm is the only way now.
Try running npm install with this spec of ckeditor 5 → , it does not have mermaid.

I'm not sure where you're getting mermaid from.

Hi, joseph.olstad.
Thanks for the update but I do not how to proceed with this.
I follow this steps based on your script.
1.- Download your zip and extract to /var/www/html/ckeditor5
Then:

[ec2-user@f4r-icreatia-dev www]$ cd html/ckeditor5/
[ec2-user@f4r-icreatia-dev ckeditor5]$ npm install

up to date, audited 215 packages in 1s

6 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities
[ec2-user@f4r-icreatia-dev ckeditor5]$

[ec2-user@f4r-icreatia-dev ckeditor5]$ npm install ckeditor5-math

added 11 packages, and audited 226 packages in 5s

6 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

[ec2-user@f4r-icreatia-dev ckeditor5]$ npm install --save @ckeditor/ckeditor5-special-characters

up to date, audited 226 packages in 2s

6 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

[ec2-user@f4r-icreatia-dev ckeditor5]$ npm install --save-dev @ckeditor/ckeditor5-track-changes

up to date, audited 226 packages in 2s

6 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

[ec2-user@f4r-icreatia-dev ckeditor5]$ npm install --save-dev @ckeditor/ckeditor5-comments

up to date, audited 226 packages in 2s

6 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

[ec2-user@f4r-icreatia-dev ckeditor5]$ npm install --save @ckeditor/ckeditor5-dev-webpack-plugin
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global...
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated @ckeditor/ckeditor5-dev-webpack-plugin@31.1.13: This package is no longer maintained. Please, read the migration path: https://github.com/ckeditor/ckeditor5-dev/releases/tag/v32.0.0.

added 316 packages, and audited 542 packages in 16s

56 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

[ec2-user@f4r-icreatia-dev ckeditor5]$ cp src/ckeditor.js src/ckeditor.js.orig
cp: cannot stat ‘src/ckeditor.js’: No such file or directory

[ec2-user@f4r-icreatia-dev ckeditor5]$ cp ../../../config-ckeditor.js src/ckeditor.js
cp: cannot stat ‘../../../config-ckeditor.js’: No such file or directory

[ec2-user@f4r-icreatia-dev ckeditor5]$ mkdir src
[ec2-user@f4r-icreatia-dev ckeditor5]$ cp ../config-ckeditor.js src/ckeditor.js

[ec2-user@f4r-icreatia-dev ckeditor5]$ npm run build
npm ERR! Missing script: "build"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run

npm ERR! A complete log of this run can be found in: /home/ec2-user/.npm/_logs/2024-07-11T16_04_31_533Z-debug-0.log

And I stop here....
After these steps, I get this in /var/www/html/ckeditor5:

[ec2-user@f4r-icreatia-dev ~]$ cd /var/www/html/
[ec2-user@f4r-icreatia-dev html]$ cd ckeditor5/
[ec2-user@f4r-icreatia-dev ckeditor5]$ ls -ltr
total 488
-rw-rw-r-- 1 ec2-user apache 6252 Jul 11 17:24 main.js
-rw-rw-r-- 1 ec2-user apache 448 Jul 11 17:24 index.html
-rw-rw-r-- 1 ec2-user apache 3172 Jul 11 17:24 style.css
-rw-rw-r-- 1 ec2-user apache 55 Jul 11 17:24 vite.config.js
drwxr-xr-x 308 ec2-user apache 12288 Jul 11 18:01 node_modules
-rw-rw-r-- 1 ec2-user apache 461 Jul 11 18:01 package.json
-rw-r--r-- 1 ec2-user apache 456041 Jul 11 18:01 package-lock.json
drwxrwxr-x 2 ec2-user ec2-user 25 Jul 11 18:04 src

Why there is not a simple way to do this?

Regards,
Jordi
JOINSO

Hi!
I do more tests and finally I start again.
Now I am not getting errors, but CKEditor is not loaded.
I follow this steps:

1) Get WYSIWG last version (7.x-2.10)
2) Install and enable it.
3) Apply this patch: https://git.drupalcode.org/project/wysiwyg/-/merge_requests/6.patch
4) Download the CKEditor 5 zip version from here: https://cdn.ckeditor.com/ckeditor5/42.0.1/zip/ckeditor5-42.0.1.zip
5) Extract to /sites/all/libraries/ckeditor5
6) Add a README.md file in /sites/all/libraries/ckeditor5 with this text:
build v42.0.0
7) Create the WYSIWG profiles for Full HTML and Filtered HTML and select CKEditor 5 42.0.0
Now it seems that every is ok?
Yes, it seems, but when I try to create a node, i get an empty textarea:

And CKEditor is not launched.
I do not see any errors on browser console.
Then I setup the profiles to allow the format selection, and I see that the default format is basic.
I switch to "Full HTML" and I get this error on console:
"Uncaught ReferenceError: ClassicEditor is not defined" in sites/all/modules/wysiwyg/editors/js/ckeditor5.js?sgobda:65

Any idea?

Regards,
Jordi

@JOINSO - The recent change that CKEditor has made to the way you install the package has added another layer of complexity to this migration.

I don't think you can just install the .zip file from the CDN link into the libraries folder. You need to create an importmap so that the various plugins and the "ClassicEditor" itself can be imported into the ckeditor5.js file:

		<script type="importmap">
		{
			"imports": {
				"ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.1/ckeditor5.js",
				"ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.1/"
			}
		}
		</script>

Additionally, the ckeditor5.js file will need to be edited to work with the new installation method as the current ckeditor5.js file does not.

I wish I could help, but I've already spent too much time trying to get this to work and I think we're just going to run with CKEditor4 until someone more knowledgeable figures it out and provides complete documentation on how to upgrade.

I hope you get some help and if I decide to spend more time on this and actually figure something out, I'll be sure to post what I learned here.

@davedg629
Yes, you are right.
I follow your suggestion, use the importmap, add css and js from CKeditor.com, and finally I can get CKEditor 5 loaded, but it does not work...
If I edit a content, the body and summary are loaded as "objects" inside the CKeditor form!
And If I edit a content: CKEditorError: can't convert null to object
So, this is too far from a clean and working solution.
Following the issue, finally you need to use npm, but some people does not be allowed to use or install npm in their sites.
IMO, a proper solution needs to be something like: install wysiwg, apply patch, download a full ckeditor5 zip, do some personal adn setup configs, and run.

I plan to work on the WYSIWYG integration in the coming weeks.

I looked into the option of porting the Backdrop core module but decided that this is probably not the right way to go, as I found too many differences/additions in the core code that the ckeditor5 module is relying on.

The build process for CKEditor library created in this issue is throwing a lot of errors/warnings for me and after building I also had errors in the console for missing plugins when testing.

I'm testing switching the library building approach to the one that backdrop CMS is using here: https://github.com/backdrop/backdrop/blob/1.x/core/modules/ckeditor5/lib...

I managed to build the library without errors and used it successfully with some updates to the code from the merge request in this issue.

I plan to work on this further, hopefully managing to add a config UI for the toolbar as well.