Option to remove whitespace in ckeditor widget

Created on 25 August 2021, over 3 years ago
Updated 9 August 2024, 5 months ago

Hi there,

It would be nice that we could have different options to print the icons

Actual:
<span class="fontawesome-icon-inline"><i class="fa-facebook-messenger fa-lg fab"></i>&nbsp;</span>

Option 1 without whitespace:
<span class="fontawesome-icon-inline"><i class="fa-facebook-messenger fa-lg fab"></i></span>

Option 2 without whitespace, without container:
<i class="fa-facebook-messenger fa-lg fab"></i>

The whitespace is impossible to remove with CSS, and makes the centered alignment of one single icon impossible. Also the container might not always be used, this just adds some unused HTML tags.

I'm a noob in module development, though I figured out the changes are to be done in fontawesome/js/plugins/drupalfontawesome/plugin.js

//if not option 2
     var container = new CKEDITOR.dom.element('span', execEditor.document);
     container.addClass('fontawesome-icon-inline');
     container.append(icon);
     //if not option 0
          container.appendHtml('&nbsp;');

//if option 2
     range.insertNode(icon);
//else
     range.insertNode(container);

I have no clue how to add options into the modal or options to the module to have it by default.

Another easier solution, but maybe less clean would be to have something like this:
<span class="fontawesome-icon-inline"><i class="fa-facebook-messenger fa-lg fab"></i><span class="fontawesome-space">&nbsp;</span></span>

This is easy to disable via CSS, but adds more HTML tags...

Feature request
Status

Active

Version

2.0

Component

Code

Created by

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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • First commit to issue fork.
Production build 0.71.5 2024