A simple click on an image with a link does not work.

[Volkozub]

Hi!

I create an image in ClassicEditor 5 and put a link on it.

<figure class="image image-style-side">
    <a href="https://www.youtube.com/"><img style="aspect-ratio:50/35;" src="/Images/CKEditor/Icon_Youtube_50x35.png" width="50" height="35"></a>
</figure>

The user sees this picture on his page with the following additional settings Classic Editor 5:

const toolbarElement = editor.ui.view.toolbar.element;
toolbarElement.style.display = 'none';
editor.enableReadOnlyMode('my-feature-id');

...but by clicking on it, he cannot follow the link. Just a single click doesn't work, a double click doesn't work. Only multiple clicks or right-click navigation works, through the browser menu, open in a tab.

If I remove the <figure> and leave only the <a>, the result is the same.

Why is this happening and how can I fix it? I need a simple mouse click on the image with a link click.

Thanks!

[Witoso]

I cannot reproduce it in our demo

https://github.com/ckeditor/ckeditor5/assets/9881379/8df8b13c-c155-4b86-9a5c-c3b26e8ba003

(I'm switching to inline image as this demo doesn't have block image url plugin loaded).

Please provide a reproducible sample.

[Volkozub]

I cannot reproduce it in our demo

Screen.Recording.2024-07-01.at.16.50.08.mov (I'm switching to inline image as this demo doesn't have block image url plugin loaded).

Please provide a reproducible sample.

Hi! Thanks for the answer!

You have recently implemented a new Builder system.

I created a new CKEditor Classic build, added something there that should fix the error with the link in the image. But now I do not know how to download the build (archive) , as before? And if I create an project as advised here (https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/dotnet.html), now I always get an error like ReferenceError: Classic Editor is not defined.

Where can I download the result build as an archive at the end of the build (how it was before)?

My project requires build in a separate archive. I can't redo everything there for initialization that doesn't work (https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/dotnet.html).

Thanks!

[Witoso]

We plan to add the download step to the builder as well in the future, if you need to download the archive, the best way is to use the download page for ZIPs.

[Volkozub]

> We plan to add the download step to the builder as well in the future, if you need to download the archive, the best way is to use the download page for ZIPs.

I know about this page and uploaded the build ckeditor5-42.0.0, but now how do I attach what I've assembled in your new CKEditor Custom builder (using assets/vendor/ckeditor.js)? Such an assembly gives an error all the time: ReferenceError: Classic Editor is not defined. (I have created custom build for the Classic version).

How do I now initialize ClassicEditor from the ckeditor5-42.0.0 folder downloaded from use the download page for ZIPs using assets/vendor/ckeditor.js with the final build code (import {...)?

I do so, but I get the same error again.

<script src="~/ckeditor5-42.0.0/ckeditor5/ckeditor5.js"></script>
<script type="module" src="~/assets/vendor/ckeditor.js"></script>

ClassicEditor
            .create( document.querySelector( '#editor' ), {
...

[Witoso]

Check the included index.html sample, there's a code there that works. Make sure you add the import map to the code.

<script type="importmap">
    {
    "imports": {
        "ckeditor5": "./ckeditor5/ckeditor5.js",
        "ckeditor5/": "./ckeditor5/"
        }
    }
</script>

And that it correctly points out to the proper path in which you set up your files.

[Volkozub]

Check the included index.html sample, there's a code there that works. Make sure you add the import map to the code.

<script type="importmap">
    {
    "imports": {
        "ckeditor5": "./ckeditor5/ckeditor5.js",
        "ckeditor5/": "./ckeditor5/"
        }
    }
</script>

And that it correctly points out to the proper path in which you set up your files.

I do everything as in index.html but there are still mistakes. And why now it doesn't like my extraPlugins: [ MyCustomUploadAdapterPlugin ], which downloads image files.

Why do these errors occur? I just want to initialize the Custom Build Classic CKEditor, but even that doesn't work.)

In the previous version of Custom Build (Classic Editor), I just downloaded the build at the end and it worked with MyCustomUploadAdapterPlugin. And the new version is even impossible to attach. 🤦‍♂️

[Volkozub]

Can I somehow download the sources in one archive as before at the end of the process of creating my custom version of the Classic CKEditor (build)? If not, then help me understand why I can't initialize CKEditor according to your example https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/dotnet.html?

[Witoso]

I do everything as in index.html but there are still mistakes. And why now it doesn't like my extraPlugins: [ MyCustomUploadAdapterPlugin ], which downloads image files.

The error mentions that you have a missing plugin (FileRepository), please add it. Second error relates to jquery, and not our editor.

In the previous version of Custom Build (Classic Editor), I just downloaded the build at the end and it worked with MyCustomUploadAdapterPlugin.

Thanks for feedback, the change in the installation method requires migration. We are aware that it might cause some problems, but it solves tons of issues for the ecosystem, and we treat it as net positive. That said, old methods are still supported, and you can update your old build before spending time on the migration.

[Volkozub]

I used to do it simply. I created an build, downloaded it, and attached it to the project with a string like and that's all. Everything worked for me. Why now it needs to be done so difficult and still nothing works, a lot of errors? )

---

The error mentions that you have a missing plugin (FileRepository), please add it. Second error relates to jquery, and not our editor.

Thanks, I'll try to add a FileRepository and see what happens.

---

Thanks for feedback, the change in the installation method requires migration. We are aware that it might cause some problems, but it solves tons of issues for the ecosystem, and we treat it as net positive. That said, old methods are still supported, and you can update your old build before spending time on the migration.

And how do I update my old build? Is there an old version of a custom build somewhere on the network with downloading the archive at the end? Or is it already impossible? Then how do I update and supplement the old build? )

[Volkozub]

I already have ImageUpload in this build, but for some reason he doesn't like my MyCustomUploadAdapterPlugin. In the last build, I also had ImageUpload and everything worked as it should. And now there is some kind of incomprehensible conflict.

[Volkozub]

Please return the old version of the Builder (with downloading the archive at the end) if there are such difficulties with the new one. Or leave it somewhere else at another link. Or make it possible to download the build as an archive at the end of the new CKEditor Builder system. It turns out that the old CKEditor Builder that works was deleted, and the new one that does not work was implemented.

[Witoso]

We specifically bumped the version to inform that it will require migration to the new setup. I'm willing to help but so far, I haven't seen any detail which I could use to advise.

Please prepare some reproducible sample or share some code that could help us debug and assist. We are not intending to bring the old builder back, but we will use your feedback to improve the new one and the docs. Thanks!

[Volkozub]

We specifically bumped the version to inform that it will require migration to the new setup. I'm willing to help but so far, I haven't seen any detail which I could use to advise.

Please prepare some reproducible sample or share some code that could help us debug and assist. We are not intending to bring the old builder back, but we will use your feedback to improve the new one and the docs. Thanks!

I went here https://ckeditor.com/ckeditor-5/download/#zip, downloaded Zip CKEditor 5 (ckeditor5-42.0.0), in the file index.html replaced...

import {
                ClassicEditor,
                Essentials,
                Paragraph,
                Bold,
                Italic,
                Font
            } from 'ckeditor5';

...to my custom build, assembled in your new build.

Launched index.html And I saw:

Do I need to have my own server now to check to run CKEditor? So it does not start on localhost and on a third-party server, too, and I think it will not start on the Moon either.)

Explain how you need to run it now, for example, in the Net.Core in VS?

P.S. Even if you just run the source index.html (as is) in ckeditor5-42.0.0, it will be the same.

[Witoso]

This message only shows when you double-click the file, as it checks the file protocol. This is because the sample uses type="module" which, by the standards defined, needs to be run via web server. See [MDN]:(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#troubleshooting)

If you try to load the HTML file locally (i.e. with a file:// URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server. GitHub pages is ideal as it also serves .mjs files with the correct MIME type.

If you run it on any server, local/development HTTP environment, it won't be visible, and the editor will start.

Remove the alert during the integration, as it's not needed. We will also add a sample to this ZIP that works without this requirement.

[Volkozub]

This message only shows when you double-click the file, as it checks the file protocol. This is because the sample uses type="module" which, by the standards defined, needs to be run via web server. See [MDN]:(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#troubleshooting)

If you try to load the HTML file locally (i.e. with a file:// URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server. GitHub pages is ideal as it also serves .mjs files with the correct MIME type.

If you run it on any server, local/development HTTP environment, it won't be visible, and the editor will start.

Remove the alert during the integration, as it's not needed. We will also add a sample to this ZIP that works without this requirement.

This message only shows when you double-click the file, as it checks the file protocol. This is because the sample uses type="module" which, by the standards defined, needs to be run via web server. See [MDN]:(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#troubleshooting)

If you try to load the HTML file locally (i.e. with a file:// URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server. GitHub pages is ideal as it also serves .mjs files with the correct MIME type.

If you run it on any server, local/development HTTP environment, it won't be visible, and the editor will start.

Remove the alert during the integration, as it's not needed. We will also add a sample to this ZIP that works without this requirement.

Yes, thanks, everything worked in the localhost project. index.html works with my custom settings according to the new Builder. 🙂🙂🙂👍👍👍

The only thing I want to say is if I use this line in my project and output the settings to assets/vendor/ckeditor.js, then I get the error ReferenceError: ClassicEditor is not defined.

<script type="module" src="~/assets/vendor/ckeditor.js"></script>

I think that "module" is not initialized, although the path is specified correctly (maybe I'm initializing it incorrectly somehow, although I'm doing everything as in the example: https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/dotnet.html).

I have to insert the entire import with all the settings directly into the page. It's uncomfortable.

I will check with [MyCustomUploadAdapterPlugin] and other settings...

P.S. There was also a problem with the fact that there was no Font in import and plugins. I just had to enter it manually and the build worked.

[Volkozub]

As a result, after the tests, clicking on the image with the link does not work anyway. But the worst thing is that the entire layout of existing designed texts stops working - color highlighting, indentation, line spacing, text color, and so on. The felt-tip pen does not work correctly - it highlights only the letters themselves in color. The horror! I will test further, there will probably be many more problems. If the text changes this way, then the assemblies with the new Builder greatly break the design in the old assemblies. 🙁

You don't allow the old builds to be improved (rebuilt), but the new builder build assemblies that are incompatible with the old ones in terms of CSS (as I understand it). 🙁

It turns out that the new assembly can only be used in a way where the design is created from scratch and then with caution, since there are some problems with indentation in the text and maybe something else. 🙁

I had one question - why does clicking on the image not work, and now I have 2 questions - the same and why does the text design/layout break in new Build?

It's all strange. And in general it looks like CKEditor New Build CSS Sabotage.

[Volkozub]

Sorry, there's nothing wrong with the felt-tip pen and pencil. But the colors, links, enters (\n) and other settings of the text break down. 👎😕 But maybe something else. Inside, the text is redone so that it can no longer be restored in the old version, and in the new one it looks broken. Please return the old version of the Builder, at least for those people who already have everything working on the old build. Why you treat CKEditor 5 users in this way is incomprehensible to me. It looks like forcing new versions and disrespecting those who use previous versions in projects. This is called abusing and gaslighting. ) I had to restore the text, as the new version broke it all. Make a separate page (at least) where we can rebuild CKEditor 5 in the previous version of Builder.

[Volkozub]

I configured CSS in my project for the previous version of the CKEditor builder - and you closed it. With the new version of ckeditor 5.css, my text on pages works incorrectly. Bring back the previous version of the builder (on a separate page, for example) and promote a new one so that people can smoothly switch to the new version without breaking their projects. And now, it looks like bullying.

[Reinmar]

I'm sorry @Volkozub that you feel this way.

It was our goal to make the migration as smooth as possible. We are fully aware that everyone prefers if bumping up a version of their dependency would not require any additional work. That, unfortunately, was really hard for us to achieve. That's why we have put many months of work into ensuring that the New Installation Methods would not block anyone from migrating and worked for weeks on 6 long migration guides. In general, this project took 9 months and involved well over a dozen of people.

As for the old builder: It requires work to bump it on every CKEditor release. And since we didn't thought that it might still be needed (I agree that we should've kept it for a while), it's now time consuming to bring it back.

However, we'd consider that if we would see that people are fully blocked from migrating. Which, to our knowledge, does not happen. We actively monitor all support channels and try to help everyone with migration, knowing that there may be some rough edges of the New Installation Methods. We try to help you as well. However, we can't help if you are not providing necessary information. As @Witoso wrote:

Please prepare some reproducible sample or share some code that could help us debug and assist. We are not intending to bring the old builder back, but we will use your feedback to improve the new one and the docs. Thanks!

Once again: we cannot help if you won't provide necessary information.

PS. Let me repeat this once again: The old builder is not necessary to migrate to v42.0.0. ZIP downloads are still available (no one needs to build anything themselves) and it's explained in the migration guide how to migrate.

PPS. Your feedback made me report one issue for the New Builder. You've run into an issue with missing ImageUpload plugin from what I can see. This is a UX issue in the Builder that I'd like to quickly resolve. I'll also report a ticket to improve the migration guide for the users of the old Online Builder. I think it could be better.

[Volkozub]

I'm sorry @Volkozub that you feel this way.

It was our goal to make the migration as smooth as possible. We are fully aware that everyone prefers if bumping up a version of their dependency would not require any additional work. That, unfortunately, was really hard for us to achieve. That's why we have put many months of work into ensuring that the New Installation Methods would not block anyone from migrating and worked for weeks on 6 long migration guides. In general, this project took 9 months and involved well over a dozen of people.

As for the old builder: It requires work to bump it on every CKEditor release. And since we didn't thought that it might still be needed (I agree that we should've kept it for a while), it's now time consuming to bring it back.

However, we'd consider that if we would see that people are fully blocked from migrating. Which, to our knowledge, does not happen. We actively monitor all support channels and try to help everyone with migration, knowing that there may be some rough edges of the New Installation Methods. We try to help you as well. However, we can't help if you are not providing necessary information. As @Witoso wrote:

Please prepare some reproducible sample or share some code that could help us debug and assist. We are not intending to bring the old builder back, but we will use your feedback to improve the new one and the docs. Thanks!

Once again: we cannot help if you won't provide necessary information.

PS. Let me repeat this once again: The old builder is not necessary to migrate to v42.0.0. ZIP downloads are still available (no one needs to build anything themselves) and it's explained in the migration guide how to migrate.

PPS. Your feedback made me report one issue for the New Builder. You've run into an issue with missing ImageUpload plugin from what I can see. This is a UX issue in the Builder that I'd like to quickly resolve. I'll also report a ticket to improve the migration guide for the users of the old Online Builder. I think it could be better.

I understand you, but my project fell apart because of this. Well, not completely.

I understand no use the old build of the builder in the new one. Of course, I was implementing clear new build. Together they did not crossed in any way. I said that the text collected in the old assembly (saved in the database) - if it is output in the new one, it changes and breaks, the enters do not work, colors and links fly off.

I'll try to create an example for you where my text changes and the functions in the new build don't work. I would like that when switching to a new build, the text (and the entire layout) in the old builds would not break.

But if you take a human approach to this issue. You should have left the option of building according to the old scheme.