Skip to content

Instantly share code, notes, and snippets.

@sebkln
Created January 6, 2024 14:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sebkln/5919ef1fcf2008f3f667b0a04468e7c8 to your computer and use it in GitHub Desktop.
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.
# 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'] }
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'});
}
}
<?php
return [
'dependencies' => ['backend'],
'tags' => [
'backend.form',
],
'imports' => [
'@yourvendor/ckeditor-div' => 'EXT:your_sitepackage/Resources/Public/JavaScript/CKEditor/div.js',
],
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment