Auto Image plugin, no tags for theming

Created on 2 October 2024, 4 months ago

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

Translated with DeepL.com (free version)

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

💬 Support request
Status

Active

Version

1.2

Component

User interface

Created by

🇮🇹Italy senzaesclusiva

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @senzaesclusiva
  • 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 :)

  • 🇮🇹Italy senzaesclusiva

    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;
    }
    
  • 🇵🇱Poland salmonek

    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 [upstream] [GHS] Allow CKEditor 5 support for containers: div, article, section, aside, etc. Postponed
    Which depends on the CKEditor's issue:
    https://github.com/ckeditor/ckeditor5/issues/6462

  • 🇵🇱Poland salmonek

    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...

  • 🇮🇹Italy senzaesclusiva

    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.

  • 🇵🇱Poland salmonek

    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.

Production build 0.71.5 2024