TYPO3 ckeditor table - 添加 div 响应式 class

Question

在TYPO3 ckeditor中是默认的html输出：

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

对于响应式 bootstrap table 我需要围绕标签：

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

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

如何添加包装？

我为 table 添加了这个“ckeditor externalPlugins”： https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Public/CKEditor/Plugins/Table/plugin.js

也许我可以在前端添加一个包装？

Answer 1

制作config.yaml行：

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

使用 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);
    }
});

还要确保允许使用标签等。

Answer 2

感谢您提供好的解决方案！

但它不起作用，我这样做:

RTE 配置：

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"}

还有这个：

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

在TableWrap.js中是这样的：

'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);
        }
    });

})();

这样的例子：https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Public/CKEditor/Plugins/Table/plugin.js

我的前端 HTML 输出是这样的：

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

也许是另一个 javascript 错误？

Answer 3

您可以使用 TypoScript 将必要的包装器添加到前端：

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

这将应用于 RTE 字段内的所有 <table> HTML 元素。

Bootstrap 包的工作方式相同：https://github.com/benjaminkott/bootstrap_package/blob/master/Configuration/TypoScript/ContentElement/Helper/ParseFunc.typoscript#L91

TYPO3 ckeditor table - 添加 div 响应式 class

TYPO3 ckeditor table - add div for responsive class

html

typo3

ckeditor

twitter-bootstrap

typo3-11.x