Can not add image assets

[tsawitzki]

Hello,
love the implementation so far, except that there is no way to add image assets in the CP in Craft 3 after installing the plugin. I can’t find any information on how to make it work with Craft’s asset configuration and the official CKEditor documentation is quite rocket-science to me when it comes to enabling basic image functionality.
Any hints?

[theskyfloor]

This is coming in a future update to the plug-in. The Craft team hadn't implemented it yet because CKEditor was not stable. Now that it is they should be working on it. Although it would be great to get an idea of a timeline from them!

[theskyfloor]

This is going to be coming and integrated now? : )

[brandonkelly]

Going to look into it soon.

[proimage]

Even if you don't have the time to implement this properly, then at least an indication of some sort when one tries to upload an image that it doesn't work yet would be welcome. 😉 Right now it just kinda fails gracefully but silently.

[magnessjo]

I've been exploring adding CKEditor to my Craft sites, and I have some questions and possibly some insights on the image upload issue.

Based on my understanding (the Craft teams knows way better than I do), the 'classic' editor version comes out of the box with the image upload plugin (and its numerous parts -> see note 1). Unfortunately, the Image upload plugin only provides the interactions (which makes sense) and leaves the uploading process to the user who initializing it. In other words, the upload plugins job is to present filesystem dialog so a user can select their Image and show it in the text area (maybe).

Configuration information must be provided to the editor when it's initialized to save files to the local filesystem (or S3 or whatever). CKEditor refers to this configuration step as upload adapters. They list several options:

Easy Image (their homegrown solution) costs a ton but requires no other work from the Craft team. If you wanted to make the current Craft version work with the CDN, you could initialize a version as the Craft docs suggest and pass it to your cloud key. However, it probably isn't ideal for many users (a dealbreaker for me due to cost).

CKFinder is another option. It's new to me. I assume it could be bolted onto the Craft CKEditor plugin (based on a quick scan of the docs). The configuration objects seem straightforward (just provide a uploadUrl string).

Simple Upload seems to be the age-old solution for CKEditor. It seems like the simplest solution for all future users. Based on what I know, I think it could work if Craft could expose an URL that checks to see if someone is logged in and pareses a query string to know what volume to put it into it.

Please let me know if anything doesn't make sense or if I am 100% off base. I will add a few other tickets for additional questions and link a ckeditor builder (of sorts) that might help clarify what I am trying to achieve.

Note 1: The CKEditor image plugin is broken into many different parts (upload, toolbar, style, caption). Some basic documentation on the different features can be found here

[pghorpade]

Any update on this issue?

[FreekVR]

Yeah would be great to have this, we need a more powerful editor especially for clients looking to edit complex tables (cellspan/colspan) which is not possible with redactor. But with ckeditor they basically cannot upload pictures or link to entries, which is also problematic. So stuck between a rock and a hard place. (Froala Craft plugin is currently also completely broken, unfortunately)

[theskyfloor]

I agree @FreekVR that its a rough spot. Redactor has never been a great option for me. I would highly recommend checking out Vizy by Verbb, even if you dont plan on using its block patterns its support for images and tables is pretty solid.

[FreekVR]

Hey @theskyfloor thanks for that suggestion.

I did check it out. It has some great wysiwyg functionality apart from the blocks even, but unfortunately no wysiwyg table plugin. Additionally, it is not possible using supertable of something similar to easily format tables with the required features (table heads, dynamic columns, col- and rowspans).

Fortunately it does look like Froala has updated their Craft plugins, which is making it at least functional again, and it now allows for both image (asset) editing AND visually creating HTML tables, so I think we'll be going for that one for the time being.

[theskyfloor]

Ah you are right! I was using something else with Vizy and got confused about where the table functionality was coming from : )

[brandonkelly]

Just released v1.2.0, which adds support for CKEditor 4’s file manager integration.*

The update requires Craft 3.7.31 (just released today), so you will need to update Craft CMS before it becomes available.

If your field is using custom initialization code, you will need to add filebrowserBrowseUrl and filebrowserImageBrowseUrl to the editor config (which are predefined constants):

return CKEDITOR.replace('__EDITOR__', {
    language,
    filebrowserBrowseUrl,
    filebrowserImageBrowseUrl,
    // ...
});

Then you will find new “Browse Server” buttons within the image and link dialogs:

Pressing it will open up an asset selector UI in a popup window, which works just like asset selection modals within Redactor fields:

Within the field settings, you can fine-tune which volumes should be visible, whether the user can see volumes/files they aren’t typically permitted to, and which image transforms should be available (and which should be selected by default).

---

*Unfortunately CKEditor 5 doesn’t have a similar easy way of integrating a file manager, so this is limited to CKE 4 for now.