How to add custom class: Vertical Tabs

Created on 11 December 2023, 7 months ago
Updated 12 December 2023, 7 months ago

How can we add custom classes to the nav UL element. Currently the classes added to the parent nav element is nav nav-tabs

When we add custom classes to the element (by editing HTML) these are getting lost when saving the node

Say we need to create a vertical tab as per this, we can achieve this by adding a class "flex-column"; but currently this is not working

✨ Feature request
Status

Active

Version

2.0

Component

Code

Created by

🇺🇸United States sumachaa

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

Comments & Activities

  • Issue created by @sumachaa
  • 🇺🇸United States sumachaa
  • 🇮🇳India SandeepSingh199

    As I go through the code, the class nav nav-tabs is hard coded in ckeditor5-bootstrap-tabs.js, We haven’t control over classes and can’t give the functionality to add a custom class. So for the quick fix for your project, you can directly add your class flex-column in ckeditor5-bootstrap-tabs.js & it will be reflect with the classes nav nav-tabs.

    Steps to add custom class :-
    1. navigate to js/build/ckeditor5-bootstrap-tabs.js inside ckeditor_bootstrap_tabs
    2. Find nav nav-tabs.
    3. Once you found that class you can add your custom class.

  • 🇺🇸United States sumachaa

    one way to achieve this would be to allow class attribute for the bootstrapTabWrapper & update the downcast function to remove the hard-coded classes

    a snapshot of how this is done is shown below

    diff --git a/js/ckeditor5_plugins/ckeditor5-bootstrap-tabs/src/bootstraptabsediting.js b/js/ckeditor5_plugins/ckeditor5-bootstrap-tabs/src/bootstraptabsediting.js
    index 596a8c3..637a1fc 100644
    --- a/js/ckeditor5_plugins/ckeditor5-bootstrap-tabs/src/bootstraptabsediting.js
    +++ b/js/ckeditor5_plugins/ckeditor5-bootstrap-tabs/src/bootstraptabsediting.js
    @@ -49,6 +49,9 @@ export default class BootstrapTabsEditing extends Plugin {
           schema.register('bootstrapTabWrapper', {
             allowIn: 'bootstrapTabs',
             isLimit: true,
    +        allowAttributes: [
    +          'class',
    +        ],
           });
           schema.register('bootstrapTab', {
             isLimit: true,
    @@ -120,12 +123,18 @@ export default class BootstrapTabsEditing extends Plugin {
         conversion.for( 'downcast' ).elementToElement( {
           model: 'bootstrapTabWrapper',
           view: ( modelElement, { writer: viewWriter } ) => {
    +        let attributes = {
    +          role: 'tablist'
    +        }
    +        if (!modelElement.getAttribute('class')) {
    +          attributes = {
    +            ...attributes,
    +            class: 'nav nav-tabs'
    +          }
    +        }
             return viewWriter.createContainerElement(
                 'ul',
    -            {
    -              class: 'nav nav-tabs',
    -              role: 'tablist',
    -            }
    +            attributes
             );
           }
    
Production build 0.69.0 2024