Problem/Motivation

First, thank you for this package collection.
I find the Auto Image plugin very useful (I was looking for something similar to the “image” plugin I was using in ckeditor4, but I can't install it in 5 version) , but I'm trying to figure out if I'm doing something wrong or it's really its limitation, the one that inserts the image address without any container tags.
Which means going into “source” and manually setting something like

.
Not exactly user-friendly and error-free if you have contributors writing articles.
Grateful for your replay

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Comments

senzaesclusiva created an issue. See original summary.

senzaesclusiva’s picture

senzaesclusiva commented
Issue summary: View changes
mdusza’s picture

mdusza commented

Thanks for reaching out. This indeed might be a limitation of the plugin, but it seems the code that you wanted to include in the issue got removed. Please let us know what do you want to achieve and we'll look into it and try to see if we can help :)

senzaesclusiva’s picture

senzaesclusiva commented

Oh, sorry, thanks for you replay
I didn't put it in by mistake as a code and the system rejected it.
I meant something simple like this. A simple 'div' tag for example that could allow it to be handled by css.
e.g.
html 

<div class=“ck-inline-remote”>
<img src=“https://...image that has been copied”>
</div>

css

.ck-inline-remote {
  display:flex;
  justify-content: center;
}
.ck-inline-remote img {
  max-width: 100%;
  border: 1px solid #b3afaf;
}
salmonek’s picture

salmonek commented

Hi @senzaesclusiva

I confirm that this is a limitation of the editor. We would need a plugin allowing a div elements manipulation. for now there is only General HTML Support plugin which allows to recognize them as valid elements, but adding and editing divs is only available through source mode.

There is a issue in Drupal core related to that functionality:
https://www.drupal.org/project/drupal/issues/3418322
Which depends on the CKEditor's issue:
https://github.com/ckeditor/ckeditor5/issues/6462

salmonek’s picture

salmonek commented

I just realised that there is some kind of workaround available with "CKEditor 5 Templates" module (part of Plugin Pack).
You can define a template with code: 

<div class="ck-inline-remote">
{placeholder}
</div>

Then in the editor first add that template and replace {placeholder} text with the image.
You will still need the source plugin active in order to have General HTML support plugin active.

Short configuration info for the Templates sub-module is available at: https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib...
And feature guide at: https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib...

senzaesclusiva’s picture

senzaesclusiva commented

Hi @salmonek
Thanks for your brilliant and simple workaround. I would never have guessed it without looking at the other plugin pack modules.
The solution is very intuitive even for those who only have to deal with writing articles.

Thanks again to you and this wonderful community.

salmonek’s picture

salmonek commented
Status: Active » Closed (works as designed)

Glad to be of help.
I'm marking this as working as designed since CKEditor 5 currently doesn't have dedicated plugin for editing div's.
Once this functionality will be available (and won't go into core), we'll most probably will add the integration.