Created
January 6, 2024 14:29
-
-
Save sebkln/5919ef1fcf2008f3f667b0a04468e7c8 to your computer and use it in GitHub Desktop.
TYPO3 v12+, CKEditor 5: simple plugin that allows to <div> elements as wrappers around paragraphs. Not yet editor-friendly, though.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # CKEditor 5 configuration in TYPO3 (excerpt) | |
| imports: | |
| - { resource: 'EXT:rte_ckeditor/Configuration/RTE/Processing.yaml' } | |
| - { resource: 'EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml' } | |
| - { resource: 'EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml' } | |
| editor: | |
| config: | |
| importModules: | |
| - '@yourvendor/ckeditor-div' | |
| heading: | |
| options: | |
| - { model: 'paragraph', title: 'Paragraph' } | |
| - { model: 'heading1', view: 'h1', title: 'Heading 1' } | |
| - { model: 'heading2', view: 'h2', title: 'Heading 2' } | |
| - { model: 'heading3', view: 'h3', title: 'Heading 3' } | |
| - { model: 'heading4', view: 'h4', title: 'Heading 4' } | |
| - { model: 'formatted', view: 'pre', title: 'Pre-Formatted Text' } | |
| - { model: 'div', view: 'div', title: 'Div' } | |
| style: | |
| definitions: | |
| # block level styles | |
| - { name: 'Info alert (p)', element: 'p', classes: ['c-alert', 'c-alert--info'] } | |
| - { name: 'Info alert (div)', element: 'div', classes: ['c-alert', 'c-alert--info'] } | |
| - { name: 'Attention alert (p)', element: 'p', classes: ['c-alert', 'c-alert--attention'] } | |
| - { name: 'Attention alert (div)', element: 'div', classes: ['c-alert', 'c-alert--attention'] } | |
| - { name: 'Warning alert (p)', element: 'p', classes: ['c-alert', 'c-alert--warning'] } | |
| - { name: 'Warning alert (div)', element: 'div', classes: ['c-alert', 'c-alert--warning'] } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Core, UI} from "@typo3/ckeditor5-bundle.js"; | |
| // This plugin allows to use <div> elements as wrappers around paragraphs. | |
| export default class DivElement extends Core.Plugin { | |
| static pluginName = 'DivElement'; | |
| init() { | |
| const editor = this.editor; | |
| const model = editor.model; | |
| const view = editor.view; | |
| model.schema.extend('div', {allowIn: '$root'}); | |
| model.schema.extend('paragraph', {allowIn: 'div'}); | |
| editor.conversion.for('upcast').elementToElement({model: 'div', view: 'div'}); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| return [ | |
| 'dependencies' => ['backend'], | |
| 'tags' => [ | |
| 'backend.form', | |
| ], | |
| 'imports' => [ | |
| '@yourvendor/ckeditor-div' => 'EXT:your_sitepackage/Resources/Public/JavaScript/CKEditor/div.js', | |
| ], | |
| ]; |
How can I achieve a div tag with embedded p tags (from scratch or wrap a div around existing p tags)? Do I have to call the source code editor?
This current workaround only ensures that paragraphs can be nested in divs with CKEditor 5.
So yes, you'll have to use the source mode and manually nest the elements.
Thank you.
In the meantime I have found out that in principle it would need the same functionality as the blockQuote button, which wraps the blockquote tag around the selected blocks.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How can I achieve a div tag with embedded p tags (from scratch or wrap a div around existing p tags)? Do I have to call the source code editor?