From e3880e72275cac7c75366d987b940f6a3a5e91de Mon Sep 17 00:00:00 2001
From: Torben Hansen <derhansen@gmail.com>
Date: Sat, 26 Aug 2023 13:00:57 +0200
Subject: [PATCH] [TASK] Improve CKEditor vendor logo placement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
With CKEditor v38.0.0 a small "Powered by CKEditor" logo has been added
to the bottom right of the editor component. The logo is visible as soon
as the CKEditor component receives the focus. The current placement of
the logo does however overlay the border of the editor component and the
term "Powered by" does not suit well to the TYPO3 backend.
With this change, the CKEditor configuration has been extended, so it is
now possible to configure `config.ui.*` settings. The `Base.yaml` file
has been extended with CKEditor UI specific settings, which remove the
term "Powered by" from the logo and which optimize the logo placement,
so it appears in the bottom right corner of the editor component without
overlaying the border.
Resolves: #101759
Releases: main, 12.4
Signed-off-by: Torben Hansen <derhansen@gmail.com>
Change-Id: Ic35054a92c7101fac9381e1476c214ffad3e0465
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80678
Tested-by: Jasmina Lie�mann <minapokhalo+typo3@gmail.com>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Jasmina Lie�mann <minapokhalo+typo3@gmail.com>
---
Build/Sources/TypeScript/rte_ckeditor/ckeditor5.ts | 4 ++++
typo3/sysext/rte_ckeditor/Configuration/RTE/Editor/Base.yaml | 5 +++++
.../rte_ckeditor/Resources/Public/JavaScript/ckeditor5.js | 2 +-
3 files changed, 10 insertions(+), 1 deletion(-)
diff --git a/Build/Sources/TypeScript/rte_ckeditor/ckeditor5.ts b/Build/Sources/TypeScript/rte_ckeditor/ckeditor5.ts
index 3acf77e4877c..a540ceaeef91 100644
--- a/Build/Sources/TypeScript/rte_ckeditor/ckeditor5.ts
+++ b/Build/Sources/TypeScript/rte_ckeditor/ckeditor5.ts
@@ -18,6 +18,7 @@ interface CKEditor5Config {
readOnly?: boolean;
language?: any;
table?: any;
+ ui?: any;
wordCount?: any;
typo3link?: any;
@@ -112,6 +113,9 @@ export class CKEditor5Element extends LitElement {
if (this.options.alignment) {
config.alignment = this.options.alignment;
}
+ if (this.options.ui) {
+ config.ui = this.options.ui;
+ }
CKEditor5
.create(this.target, config)
diff --git a/typo3/sysext/rte_ckeditor/Configuration/RTE/Editor/Base.yaml b/typo3/sysext/rte_ckeditor/Configuration/RTE/Editor/Base.yaml
index bb7d5de8fd34..917145506e10 100644
--- a/typo3/sysext/rte_ckeditor/Configuration/RTE/Editor/Base.yaml
+++ b/typo3/sysext/rte_ckeditor/Configuration/RTE/Editor/Base.yaml
@@ -7,3 +7,8 @@ editor:
- 'EXT:rte_ckeditor/Resources/Public/Css/contents.css'
height: 300
width: 'auto'
+ ui:
+ poweredBy:
+ position: 'inside'
+ side: 'right'
+ label: ''
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/ckeditor5.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/ckeditor5.js
index 4cfa1ffbc85c..f9a0263604dd 100644
--- a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/ckeditor5.js
+++ b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/ckeditor5.js
@@ -10,7 +10,7 @@
*
* The TYPO3 project - inspiring people to share!
*/
-var __decorate=function(t,e,o,i){var n,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(s=(r<3?n(s):r>3?n(e,o,s):n(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s};import{html,LitElement}from"lit";import{customElement,property,query}from"lit/decorators.js";import{CKEditor5}from"@typo3/ckeditor5-bundle.js";let CKEditor5Element=class extends LitElement{constructor(){super(),this.options={},this.formEngine={}}firstUpdated(){if(!(this.target instanceof HTMLElement))throw new Error("No rich-text content target found.");const t=(this.options.importModules||[]).map((t=>import(t)));Promise.all(t).then((t=>{const e=t.filter((t=>t.default)).map((t=>t.default)),o=CKEditor5.builtinPlugins.concat(e),i=[].concat(...o.filter((t=>t.overrides?.length>0)).map((t=>t.overrides))),n=o.filter((t=>!i.includes(t))),r={toolbar:this.options.toolbar,plugins:n,typo3link:this.options.typo3link||null,removePlugins:this.options.removePlugins||[]};this.options.language&&(r.language=this.options.language),this.options.style&&(r.style=this.options.style),this.options.wordCount&&(r.wordCount=this.options.wordCount),this.options.table&&(r.table=this.options.table),this.options.heading&&(r.heading=this.options.heading),this.options.alignment&&(r.alignment=this.options.alignment),CKEditor5.create(this.target,r).then((t=>{this.applyEditableElementStyles(t),this.handleWordCountPlugin(t),this.applyReadOnly(t);const e=t.plugins.get("SourceEditing");t.model.document.on("change:data",(()=>{e.isSourceEditingMode||t.updateSourceElement(),this.target.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}))})),this.options.debug&&window.CKEditorInspector.attach(t,{isCollapsed:!0})}))}))}createRenderRoot(){return this}render(){return html`
+var __decorate=function(t,e,o,i){var n,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(s=(r<3?n(s):r>3?n(e,o,s):n(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s};import{html,LitElement}from"lit";import{customElement,property,query}from"lit/decorators.js";import{CKEditor5}from"@typo3/ckeditor5-bundle.js";let CKEditor5Element=class extends LitElement{constructor(){super(),this.options={},this.formEngine={}}firstUpdated(){if(!(this.target instanceof HTMLElement))throw new Error("No rich-text content target found.");const t=(this.options.importModules||[]).map((t=>import(t)));Promise.all(t).then((t=>{const e=t.filter((t=>t.default)).map((t=>t.default)),o=CKEditor5.builtinPlugins.concat(e),i=[].concat(...o.filter((t=>t.overrides?.length>0)).map((t=>t.overrides))),n=o.filter((t=>!i.includes(t))),r={toolbar:this.options.toolbar,plugins:n,typo3link:this.options.typo3link||null,removePlugins:this.options.removePlugins||[]};this.options.language&&(r.language=this.options.language),this.options.style&&(r.style=this.options.style),this.options.wordCount&&(r.wordCount=this.options.wordCount),this.options.table&&(r.table=this.options.table),this.options.heading&&(r.heading=this.options.heading),this.options.alignment&&(r.alignment=this.options.alignment),this.options.ui&&(r.ui=this.options.ui),CKEditor5.create(this.target,r).then((t=>{this.applyEditableElementStyles(t),this.handleWordCountPlugin(t),this.applyReadOnly(t);const e=t.plugins.get("SourceEditing");t.model.document.on("change:data",(()=>{e.isSourceEditingMode||t.updateSourceElement(),this.target.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}))})),this.options.debug&&window.CKEditorInspector.attach(t,{isCollapsed:!0})}))}))}createRenderRoot(){return this}render(){return html`
<textarea
id="${this.formEngine.id}"
name="${this.formEngine.name}"
--
GitLab