From 733abe7f6d30f4a65928025b59b05931ea6481a7 Mon Sep 17 00:00:00 2001 From: Benjamin Kott Date: Mon, 20 Apr 2020 09:11:17 +0200 Subject: [PATCH] [FEATURE] Add CKEditor Plugin (#2) --- Classes/EventListener/RteConfigEnhancer.php | 32 +++++++ Configuration/Services.yaml | 11 +++ .../CKEditor/Plugins/Code/dialogs/code.js | 88 ++++++++++++++++++ .../CKEditor/Plugins/Code/icons/code.png | Bin 0 -> 2211 bytes .../Plugins/Code/icons/hidpi/code.png | Bin 0 -> 2639 bytes .../Public/CKEditor/Plugins/Code/lang/de.js | 3 + .../Public/CKEditor/Plugins/Code/lang/en.js | 3 + .../Public/CKEditor/Plugins/Code/plugin.js | 72 ++++++++++++++ .../CKEditor/Plugins/Code/styles/code.css | 6 ++ composer.json | 3 +- ext_emconf.php | 4 +- 11 files changed, 219 insertions(+), 3 deletions(-) create mode 100644 Classes/EventListener/RteConfigEnhancer.php create mode 100644 Configuration/Services.yaml create mode 100644 Resources/Public/CKEditor/Plugins/Code/dialogs/code.js create mode 100644 Resources/Public/CKEditor/Plugins/Code/icons/code.png create mode 100644 Resources/Public/CKEditor/Plugins/Code/icons/hidpi/code.png create mode 100644 Resources/Public/CKEditor/Plugins/Code/lang/de.js create mode 100644 Resources/Public/CKEditor/Plugins/Code/lang/en.js create mode 100644 Resources/Public/CKEditor/Plugins/Code/plugin.js create mode 100644 Resources/Public/CKEditor/Plugins/Code/styles/code.css diff --git a/Classes/EventListener/RteConfigEnhancer.php b/Classes/EventListener/RteConfigEnhancer.php new file mode 100644 index 0000000..79a13f9 --- /dev/null +++ b/Classes/EventListener/RteConfigEnhancer.php @@ -0,0 +1,32 @@ +getConfiguration(); + $configuration['syntax_code'] = [ + 'resource' => 'EXT:syntax/Resources/Public/CKEditor/Plugins/Code/plugin.js' + ]; + $event->setConfiguration($configuration); + } + + public function beforePrepareConfiguration(BeforePrepareConfigurationForEditorEvent $event): void + { + $configuration = $event->getConfiguration(); + $configuration['extraPlugins'][] = 'syntax_code'; + $event->setConfiguration($configuration); + } +} diff --git a/Configuration/Services.yaml b/Configuration/Services.yaml new file mode 100644 index 0000000..8e25db8 --- /dev/null +++ b/Configuration/Services.yaml @@ -0,0 +1,11 @@ +services: + BK2K\Syntax\EventListener\RteConfigEnhancer: + tags: + - name: event.listener + identifier: 'ext-syntax/rteConfigEnhancer' + method: 'beforeGetExternalPlugins' + event: TYPO3\CMS\RteCKEditor\Form\Element\Event\BeforeGetExternalPluginsEvent + - name: event.listener + identifier: 'ext-syntax/rteConfigEnhancer' + method: 'beforePrepareConfiguration' + event: TYPO3\CMS\RteCKEditor\Form\Element\Event\BeforePrepareConfigurationForEditorEvent diff --git a/Resources/Public/CKEditor/Plugins/Code/dialogs/code.js b/Resources/Public/CKEditor/Plugins/Code/dialogs/code.js new file mode 100644 index 0000000..bd2de45 --- /dev/null +++ b/Resources/Public/CKEditor/Plugins/Code/dialogs/code.js @@ -0,0 +1,88 @@ +CKEDITOR.dialog.add('code', function () { + + var clientHeight = document.documentElement.clientHeight; + var size = CKEDITOR.document.getWindow().getViewPaneSize(); + var width = Math.min(size.width - 70, 800); + var height = size.height / 2; + + if (clientHeight < 650) { + height = clientHeight - 220; + } + + return { + title: 'Code', + minWidth: 200, + minHeight: 100, + contents: [ + { + id: 'info', + elements: [ + { + id: 'lang', + type: 'select', + label: 'Language', + items: [ + ['None', 'language-none'], + ['Apache Configuration', 'language-apacheconf'], + ['C-like', 'language-clike'], + ['CSS', 'language-css'], + ['Git', 'language-git'], + ['HTML', 'language-html'], + ['JavaScript', 'language-javascript'], + ['JSON', 'language-json'], + ['Markup ', 'language-markup'], + ['Less', 'language-less'], + ['Markdown', 'language-markdown'], + ['MathML', 'language-mathml'], + ['nginx', 'language-nginx'], + ['PHP', 'language-php'], + ['Sass', 'language-sass'], + ['Scss', 'language-scss'], + ['SVG', 'language-svg'], + ['TypoScript', 'language-typoscript'], + ['XML', 'language-xml'], + ['YAML', 'language-yaml'], + ], + setup: function (widget) { + this.setValue(widget.data.lang); + }, + commit: function (widget) { + widget.setData('lang', this.getValue()); + } + }, + { + id: 'linenumbers', + type: 'checkbox', + label: 'Linenumbers', + default: true, + setup: function (widget) { + this.setValue(widget.data.linenumbers); + }, + commit: function (widget) { + widget.setData('linenumbers', this.getValue()); + } + }, + { + id: 'code', + type: 'textarea', + label: 'Code', + setup: function (widget) { + this.setValue(widget.data.code); + }, + commit: function (widget) { + widget.setData('code', this.getValue()); + }, + required: true, + validate: CKEDITOR.dialog.validate.notEmpty('Code cannot be empty.'), + inputStyle: 'cursor:auto;' + + 'tab-size:4;' + + 'width:' + width + 'px;' + + 'height:' + height + 'px;' + + 'padding: 1em;' + + 'text-align:left;', + } + ] + } + ] + }; +}); diff --git a/Resources/Public/CKEditor/Plugins/Code/icons/code.png b/Resources/Public/CKEditor/Plugins/Code/icons/code.png new file mode 100644 index 0000000000000000000000000000000000000000..f5caa14e6909e56a766fcd6db2b8c05dda937221 GIT binary patch literal 2211 zcmbVOZHN?Q9N#{8+U1duZ)xH*CsNe2Gta#2?2K;W?cU3VdtK+oT_|+VJoC)%aI-Vx z%4L?12!QG)Uy=O_#(}>>g_xhd>VzCDvimv-&?;Knn zi_N#K{BSs&+oWN)6i0@ulX$h{QFJV}enZtmc$9>UP70QjVy_%M#xj#0-dAxlTs|LH_DQ10DqXJ4KL`=10JAqbBu{F6GT}O{OmZ?F)(Gu2QMQD`MRB3mjBcmE#3Y5CBDhVB85&6*xg>Q$mIW*tfjUavdg;h;+9crdVoe z-G!3Z66*vFnkZph6?q(t^N~w6pn+RBuk713My5Z!ux zivmh*F4xjAt1YEcOGOZNk5M-ogv^Q#^5Y)i21($SeN4K?sF|HjZ-Q`;+~ji($0@va z*wfNJL80sCUDs|#d7$YplTJrbRhh?zEXQyw!Q+v_#u<`9AxW_UFYthe04DQL(V(bF z;uAd7c)kwJxrSwq-v(9lP}X2llayPaH02BwqW=XOSTkL}geYNF2^9$EIR%z!g+WWZ zw(C>H)H-qI^K3dj;Jc<}(-*;DZx@s8PA8z6NB|)YYv$&1TGk0dY?Fok6L}7bqYQ)tf(n9{O>}AnM}}9)@;ie?V%-+V(E_f zgy!$&kVdr>#WVs$Nk4$XA`Q0fmJNV{fP}R5(j-Kl1)@Zuh1BSmmdn-N2V89&0Nc`i zi|QRO8JLsu190=y|0K$1n8@`z6Y zEDJg>s;a3fv_sU5o0;n6GOZU{6*8?XS}H__fDRWKAWTW9^TLX}8S|gM=G&(*Vkjqx?9izkbOg6JIpWO5HN!Z`@?4o(!U$ZWK z^uw;6_rLu7c(Kr7?|Ng^;r72rte;odrv@%Bo!r}dVdsm}f38`x`0OuBrq90p?mF>C z?&)vgrB$ao=C4`adEtxGJNhO@cb@-r?Y_2-eTTuqLlawia!Sw0%dfq@W69RlFC3V+ z{{!>t$(3!LpIqHNesRO`wiDM6^-i^a_|wRqp@Yjh&s;ci{=2IawfUc@ZzoW|5@12 j{&9Hi#kQ$q(|fjDo-%Jd`rBLa=rbbQ-JkiaYh>bIl-SsM literal 0 HcmV?d00001 diff --git a/Resources/Public/CKEditor/Plugins/Code/icons/hidpi/code.png b/Resources/Public/CKEditor/Plugins/Code/icons/hidpi/code.png new file mode 100644 index 0000000000000000000000000000000000000000..245c5ad6ed57f7ae18cda0a774afcacb9f3077a8 GIT binary patch literal 2639 zcmbVO3v3f*9Pc(@z&4}c1PPAw5Ffbfz1!YNVWZunNN3q9o2bawyYJR>?OnaQ(rsX< zMi7t)8AFV`<|`VB_y|l1$`&QaR6?TBU_>D?;#)8nkVL`n`T}(#vB~wm@9y`1|9{{A zR)v}xD#lJ4>u@+K0*(G=bjR##^eFUic6a}ZZetRScbN`H*?9XZay+$pqQg=8yBcn@ z+JbXMNsl{$tVf`;GoC23;3-5ru3Z(HxJt1t;xdIYFq#7>f3gl!v5Qf_8}Vj1JIM8X)1L(MV~mM&luQQgwbsQxdi3$OoT z0Hrnb~1g7$=Iw@9-h z$KFcOB1L7PL0wjruD?NrFwKj!Aad@%KvB!dzykjXmL*ZqjW|FFQ{$i=k_oLH#|mW- zeR@nckYVHRtY-(jeT!XWm)^&qNUNJU;tEsDrQWj1p}oDJG@tC%{| z4%2p15o7P@jvRe|$cnNmCRluF?=P>PhV}lR)cK#@=aMT$fz}Suq#$uSo=kPKr6K=bwd_8iwHr`Y?L#sb z|HZw8w4$R0^@r9`k0|QJ(GD6Abzh5xsv5UzY6EN%hJY1C#g6GonE<8RsO(~pA^KJq}B$nVffhIgO>muATBXbf(v5X+x zrr9TfOO_*oo975hVPt~iS=8Hr@(>cwL?~7e6v2&7tgLf+(%2MECJ`}E`}1@}LY#m+ zjrc3@1dz~5@h~m{xM)scl?&<1QDV4sWzu`m2+L<2%|&}z7|3W-80k<$)iKb(9=+z? z{SHUb*?_+`+_wCujb74Ud-aNKmGiBYbNZV@f&PzH?r-(?KD>JVS7clNgfMsRk$nw~ z;l2Hbx79oy4mCy(&pX0?w!TC8`8wCUM9-$V$2Xtadt&Jp@7>h?lbb$0z5U1Y#f~-f z&SO>OCG~qhnfT@Wp9Xs;ZL5R*(bA^I`O798{Jgkm%i#9Whu2oFJ2P5IC)es%f7|og z7w3{gLp!UBM)nm?E_r+F#3kn{j?Lcxc2CPyN9(1*gp_Ucck{lECs*H5WswG9@A;POZBBj)T9gT~u~v_k!Dc-+Z+E zqazKW5vQ9U+E_DCvUAJv#Z@B?+&)-&9|`Ew*ET(uey?}gkgw{G@?9IwE?9ZZhJop) zDtaQl{ZlIOj_;b^dU~mwX-!QVH*d9XR{f#D%~y6T|6*|E8s8g7S8p9({lczNNA-al zhsv()-TlB*1JCUJ`I|9Mj%;F2K09gL?f2jJ{;dIa-0FkJ|EO=UZYqAgb)&B))*@n4 v_PMrIJyzMb=jdBsyQ9m`pI@', + parts: { + pre: 'pre', + code: 'code' + }, + allowedContent: 'pre(line-numbers); code(language-*)', + requiredContent: 'pre', + styleableElements: 'pre', + dialog: 'code', + mask: true, + upcast: function (element) { + if (element.name != 'pre') { + return; + } + var children = element.children.filter( + child => child.type != CKEDITOR.NODE_TEXT + ); + if (children.length != 1 || children[0].name != 'code') { + return; + } + var code = children[0]; + if (code.children.length != 1 || code.children[0].type != CKEDITOR.NODE_TEXT) { + return; + } + return element; + }, + downcast: function (element) { + var code = element.getFirst('code'); + code.children.length = 0; + code.add(new CKEDITOR.htmlParser.text(CKEDITOR.tools.htmlEncode(this.data.code))); + return element; + }, + init: function () { + this.data.code = CKEDITOR.tools.htmlDecode(this.parts.code.getHtml()); + this.data.lang = this.parts.code.getAttribute('class') ?? 'language-none'; + this.data.linenumbers = this.parts.pre.hasClass('line-numbers'); + }, + data: function () { + if (this.data.lang) { + this.parts.code.removeAttribute(['class']) + this.parts.code.addClass(this.data.lang); + } + if (this.data.linenumbers) { + this.parts.pre.addClass('line-numbers'); + } else { + this.parts.pre.removeClass('line-numbers'); + } + if (this.data.code) { + this.parts.code.setHtml(CKEDITOR.tools.htmlEncode(this.data.code)); + } + } + }); + } + }); + +})(); diff --git a/Resources/Public/CKEditor/Plugins/Code/styles/code.css b/Resources/Public/CKEditor/Plugins/Code/styles/code.css new file mode 100644 index 0000000..3b363d3 --- /dev/null +++ b/Resources/Public/CKEditor/Plugins/Code/styles/code.css @@ -0,0 +1,6 @@ +.cke_widget_code pre { + padding: 1rem; + background-color: #f2f2f2; + border: 1px solid #cacaca; + border-radius: 3px; +} diff --git a/composer.json b/composer.json index 363d221..1a92bb2 100644 --- a/composer.json +++ b/composer.json @@ -27,7 +27,8 @@ "php": ">=7.0.0", "typo3/cms-backend": "^8.7 || ^9.5 || ^10.0 || 10.*@dev", "typo3/cms-core": "^8.7 || ^9.5 || ^10.0 || 10.*@dev", - "typo3/cms-frontend": "^8.7 || ^9.5 || ^10.0 || 10.*@dev" + "typo3/cms-frontend": "^8.7 || ^9.5 || ^10.0 || 10.*@dev", + "typo3/cms-rte-ckeditor": "^8.7 || ^9.5 || ^10.0 || 10.*@dev" }, "require-dev": { "friendsofphp/php-cs-fixer": "^2.3.1", diff --git a/ext_emconf.php b/ext_emconf.php index 7df7fb7..47806ad 100644 --- a/ext_emconf.php +++ b/ext_emconf.php @@ -13,8 +13,8 @@ 'category' => 'templates', 'constraints' => [ 'depends' => [ - 'typo3' => '8.7.0-10.0.99', - 'rte_ckeditor' => '8.7.0-10.0.99' + 'typo3' => '8.7.0-10.4.99', + 'rte_ckeditor' => '8.7.0-10.4.99' ] ], 'autoload' => [