Contrib.social

Integrate a functionality of the CKEditor Bootstrap Buttons module

Open on Drupal.org →
Created on 22 February 2024, 9 months ago
Updated 26 June 2024, 5 months ago

Problem/Motivation

In this module CKEditor Bootstrap Buttons → during migration to Ckeditor 5 ( Issue #3308035 🌱 Drupal 10 & CKEditor 5 Support Needs review )
I've stacked with problems to make it work with your Editor Advanced link module. 
Because both modules use the class attribute, we have a conflict in using it simultaneously. Moreover, I can't extend the link form to make it look good with both field groups.

Proposed resolution

So, the easiest way for me was to Integrate a functionality of the CKEditor Bootstrap Buttons module in your module. Currently, we can use it just as a patch, but maybe the maintainers can consider the ability to merge it into the module.
I understand that maybe it is not the best way to solve the issue, but it works for me

User interface changes

In the edit format form for the Advanced Links section, we have a new option, Bootstrap Button.

After enabling it, the link form will add a new Group Section, "Bootstrap Buttons" with three fields:

  •  - Size (sm, lg)
  •  - Color (primary, secondary, success, danger, warning, info, light, dark, link)
  •  - Style (default, outline)

  • - after filling these fields to the link, it will add three new attributes: data-button-style, data-button-color, and data-button-size, which store values from these fields
  • - after submitting the form to the class, attributes of the link will added to classes to style the link as a button
  • - in a result, we got this structure of a tag: <a class="advanced-link btn btn-primary btn-lg" href="https://example.com/" title="primary" data-button-color="primary" data-button-size="lg" data-button-style="default">Primary</a>

How it look like on front side

Remaining tasks

  • - to replace the Size and Color field with a Dropdown widget
  • - to replace the Style widget by a toggle widget
  • - to add tests for the bootstrap button's functionality
✨ Feature request
Status

Needs work

Version

2.0

Component

Code

Created by

🇺🇦Ukraine aleevas

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024