0

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

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

对于响应式引导表，我需要对标签进行环绕：

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

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

如何添加包装？

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

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

4

3 回答 3

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

还要确保标签是允许的等。

于 2022-03-01T23:54:45.570 回答
0

谢谢你的好解决方案！

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

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错误？

于 2022-03-02T07:53:54.730 回答
0

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

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

然后，这将应用于<table>RTE 字段中的所有 HTML 元素。

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

于 2022-03-05T16:35:44.633 回答