- Issue created by @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 classflex-column
in ckeditor5-bootstrap-tabs.js & it will be reflect with the classesnav 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 classesa 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 ); }