Problem/Motivation

Thanks for this module !
But I have a major problem when I update a node wich include previously inserted buttons, all buttons get a broken html output (see screenshot here : https://ibb.co/QbQrCrS)

ok

Steps to reproduce

When I create my node with body field wich include bootrap button everything is ok.
When I update my node with body field wich include bootrap button all previously inserted buttons are broken

Comments

jazzyjube created an issue. See original summary.

shra’s picture

It looks like you have one anchor container inside of another one. Check your HTML for unclosed tags.

arialblack’s picture

Nope, I faced with same issue. It happens when the button (link) has more than one class name, for example, 'btn btn-primary'. And its ok when link have only one class name.
1. Add button - looks ok.
2. Save node and observe how button is rendered - looks ok
3. Edit same node - you will noticed nested <a> tags in inspector
And its doesn't reproduced if to disable this plugin, and insert button from the styles dropdown: https://i.imgur.com/jsso0Ph.png & https://i.imgur.com/du9nYOM.png

ravi kant’s picture

The issue may appear due to some other elements not properly closing.
The issue may be debugging on the website.

Only local images are allowed.

ravi kant’s picture

StatusFileSize
new98.82 KB
ethant’s picture

Same issue here. This is a critical bug.

shra’s picture

Guys, could you please share more details. ArialBlack, could you please post here an example of old html which doesn't work? And also provide /admin/config/content/formats settings for "Bootstrap Buttons" plugin.

It is necessary to take in account: this is an expected button template -
<a class="btn OTHER-CLASSES" href="#"><span class="text">button</span></a>

You may configure expected classes here /admin/config/content/formats for each text format to cover all classes you used for button <a> and also class for <span> container. All unregistered classes will be removed by cke5.

arialblack’s picture

I recorded the video: https://youtu.be/gL98gRLOJW8

shra’s picture

Thanks, ArialBlack for the video!
I tested few cases so far, and this is nor "Convert URLs into links" nor "Linkit URL converter". I use them both, by the way, no issues.

If it is possible, can you additionally provide full list of used modules (at least ckeditor related)? I see there are many filters, but i am not familiar with all of them.

arialblack’s picture

Hm...let my try to test again

taote’s picture

Same thing happening here. Drupal 10.3 version and the following CKEditor modules installed:

  • CKEditor 5 Bootstrap Buttons (c5bb)
  • CKEditor 5 Paste Filter (ckeditor5_paste_filter)
  • CKEditor5 Bootstrap Tabs (ckeditor_bootstrap_tabs)
  • CKEditor Bootstrap Grid (ckeditor_bs_grid)
  • CKEditor 5 Link Styles (ckeditor_link_styles)
  • CKEditor Quote (ckeditor_quote)
shra’s picture

Finally i have reproduced the bug. As a fix i released next verstion 1.0.8.
@taote @ArialBlack @EthanT Please test on your side and give me a feedback.

arialblack’s picture

@shra I can confirm that problem is gone in 1.0.8. Great!

godotislate’s picture

Version: 1.0.6 » 1.0.8
Status: Active » Needs review
StatusFileSize
new70.34 KB

I was experiencing the same problem on 1.0.8 with links that had "target" attributes as well. Here's a patch.
This patch does not work.

godotislate’s picture

Version: 1.0.8 » 1.0.x-dev
StatusFileSize
new70.85 KB

Following up on #14, after more investigation, I found that that patch does not work, so, first, I am providing a new patch that does work as far as I have test.

The steps to reproduce the issue with the 'target' attribute include also having the Editor Advanced Link module installed and configured.
Steps:

  1. Install Drupal with standard profile
  2. Add this and Editor Advanced Link module to codebase and install them both
  3. Configure the Basic HTML text format/editor
  4. Add Bootstrap Buttons to the active toolbar
  5. Under "CKEditor 5 plugin settings", click on the "Advanced links" vertical tab
  6. Check the "Open in new window (<a target="_blank">)" box
  7. Save the format
  8. Create a new Basic page node
  9. Make sure Body Text format is set to "Basic HTML"
  10. Type in some text, then select it and use the BB tool
  11. Set the URL to any value, and the Target to "New Window (_blank)"
  12. Save the node
  13. Confirm on view that the link displays as expected, and clicking on the link opens the URL in a new window/tab
  14. Edit the node
  15. Click to view the body source
  16. Observe that instead of the link markup looking like this:
    <a class="btn btn-primary" href="https://example.com" target="_blank"><span class="text">some text</span></a>
    

    It is now wrapped with additional a tags with the target attribute:

    <a target="_blank"><a class="btn btn-primary" href="https://example.com" target="_blank"><span class="text"><a target="_blank">some text</a></span></a></a>
    

Solution in the patch makes sure to consume the "target" attribute during upcast conversion, so that other plugins do not act on it.

shra’s picture

shra’s picture

Status: Needs review » Fixed

It seems we have this fixed.
Thank you all, guys!
Let's make Drupal great again :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.