在 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
也許我可以在前端添加一個包裝？
uj5u.com熱心網友回復：
您可以使用 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
uj5u.com熱心網友回復：
創建一個 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);
}
});
還要確保標簽是允許的等。
uj5u.com熱心網友回復：
謝謝你的好解決方案！
但它不起作用，我這樣做：
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錯誤？
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/438898.html