In the TYPO3 ckeditor is the default html output:
<table >
...
</table>
for the responsive bootstrap table i need a wrap around the Tag:
<div >
<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?
CodePudding user response:
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.
CodePudding user response:
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 >
<table >
<tbody><tr>
...
</tr></tbody>
</table>
</div>
Maybe it's another javascript error?