TYPO3 ckeditor 表 - 添加 div 响应 class

Question

In the TYPO3 ckeditor is the default html output:

<table class="table">
   ...
</table>

for the responsive bootstrap table i need a wrap around the Tag:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bootstrap 5 responsive table:
https://getbootstrap.com/docs/5.1/content/tables/#responsive-tables

How can i add a wrap?

i add this "ckeditor externalPlugins" for table: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Public/CKEditor/Plugins/Table/plugin.js

maybe i could add a wrap to the frontend there?

Answer 1

Make a config.yaml line:

externalPlugins:
    table_wrapper: {resource: "EXT:my_ext/Resources/Public/JavaScript/Plugins/wrapper.js"}

With js:

CKEDITOR.plugins.add('table_wrapper', { 
    init: function (editor) {
        editor.on('insertElement', function (event) {
            if (event.data.getName() === 'table') {
                var div = new CKEDITOR.dom.element('div').addClass('table-responsive'); // Create a new div element to use as a wrapper.
                event.data.appendTo(div); // Append the original element to the new wrapper.
                event.data = div; // Replace the original element with the wrapper.
            }
        }, null, null, 1);
    }
});

Also make sure the tags are allowed etc.

Answer 2

You can use TypoScript to add the necessary wrapper to the frontend:

lib.parseFunc_RTE {
    externalBlocks {
        table {
            stdWrap {
                wrap = <div class="table-responsive">|</div>
            }
        }
}

This will then apply to all <table> HTML elements inside RTE fields.

The Bootstrap Package works the same way: https://github.com/benjaminkott/bootstrap_package/blob/master/Configuration/TypoScript/ContentElement/Helper/ParseFunc.typoscript#L91

Answer 3

thanks for the nice Solution!

but it dont work, i do this:

RTE Config:

editor:
  externalPlugins:
    table_responsive: { resource: "EXT:rlp_base/Resources/Public/RTE/Plugins/Table.js" }
    table_wrap: {resource: "EXT:rlp_base/Resources/Public/RTE/Plugins/TableWrap.js"}

and this:

editor:
  ...
  config:
    ...
    extraPlugins:
      - justify
      - table_responsive
      - table_wrap

in the TableWrap.js is this:

'use strict';

(function() {

    CKEDITOR.plugins.add('table_wrap', {
        init: function (editor) {
            editor.on('insertElement', function (event) {
                if (event.data.getName() === 'table') {
                    var div = new CKEDITOR.dom.element('div').addClass('table-responsive'); // Create a new div element to use as a wrapper.
                    event.data.appendTo(div); // Append the original element to the new wrapper.
                    event.data = div; // Replace the original element with the wrapper.
                }
            }, null, null, 1);
        }
    });

})();

Example like this: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Public/CKEditor/Plugins/Table/plugin.js

my Frontend HTML output is this:

<div class="ce-bodytext">
  <table class="table">
    <tbody><tr>
      ...
    </tr></tbody>
  </table>
</div>

Maybe it's another javascript error?