{"id":4041,"date":"2019-09-06T13:14:24","date_gmt":"2019-09-06T11:14:24","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=4041"},"modified":"2019-09-06T13:16:30","modified_gmt":"2019-09-06T11:16:30","slug":"plugin-ckeditor-erweitern-typo3","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/","title":{"rendered":"Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben"},"content":{"rendered":"<p>In diesem Artikel m\u00f6chte ich euch zeigen, wie man eigene Plugins f\u00fcr den CKEditor in TYPO3 programmieren kann.\u00a0 Zwar gibt es bereits eine Vielzahl von Plugins f\u00fcr den Editor, aber diese decken nicht alle Anwendungsf\u00e4lle ab.<\/p>\n<p>Der CKEditor ist der aktuelle Editor in TYPO3. Hier pflegen Redakteure ihre Inhalte und k\u00f6nnen u.a. Verlinkungen und Formatierungen vornehmen. Wie der Editor konfiguriert wird, erkl\u00e4ren wir bereits in einem anderen <a href=\"https:\/\/www.clickstorm.de\/blog\/der-neue-typo3-rte-ckeditor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blogbeitrag<\/a>.<\/p>\n<h2>Ausgangsszenario<\/h2>\n<p><span style=\"font-family: ProximaNW01-AltLightReg, sans-serif; font-size: 18px;\">Zur Demonstration nehmen wir einen einfachen Anwendungsfall. <\/span><\/p>\n<h3>Anwendungsfall<\/h3>\n<p><span style=\"font-family: ProximaNW01-AltLightReg, sans-serif; font-size: 18px;\">Der Nutzer kopiert des \u00d6fteren Inhalte aus einer Fremdsoftware. Die Texte werden dort wie folgt formatiert:<\/span><\/p>\n<ul>\n<li>*Text* f\u00fcr <strong>Text in fett<\/strong><\/li>\n<li>_Text_ wird zu <em>kursiven Text<\/em><\/li>\n<\/ul>\n<p>Im TYPO3 sind das keine g\u00e4ngigen Formatierungen. Sch\u00f6n w\u00e4re es, wenn die \u00fcblichen &lt;b&gt; und &lt;i&gt; HTML-Auszeichnungen genutzt w\u00fcrden.<\/p>\n<ul>\n<li>&lt;b&gt;Text&lt;\/b&gt; f\u00fcr <strong>Text in fett<\/strong><\/li>\n<li>&lt;i&gt;Text&lt;\/i&gt; f\u00fcr <em>kursiven Text<\/em><\/li>\n<\/ul>\n<h3>Anforderungen<\/h3>\n<p>In dem CKEditor soll es einen neuen Button geben. Sobald dieser gedr\u00fcckt wird, werden die Sternchen (*) durch HTML &lt;b&gt;-Tags ersetzt und die Unterstriche (_) durch &lt;i&gt;-Tags.<\/p>\n<h2>Ein eigenes Plugin registrieren<\/h2>\n<h3>YAML-Datei anlegen<\/h3>\n<p>Der CKEditor wird \u00fcber Dateien im YAML-Format konfiguriert. YAML ist vereinfacht gesagt eine Auszeichnungssprache. Unsere Konfigurationsdatei f\u00fcr das neue Plugin sieht wie folgt aus.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\"># Register new plugin for ckeditor\r\neditor:\r\n  externalPlugins:\r\n    tx_csckeditorexample: { resource: \"EXT:cs_ckeditor_example\/Resources\/Public\/JavaScript\/Plugin\/Example\/tx_csckeditorexample.js\" }<\/pre>\n<p>An dieser Stelle wird nichts weiter getan, als ein neues Plugin zu registrieren und den Pfad zu der entsprechenden JavaScript-Datei anzugeben. In dieser Datei befindet sich der eigentliche Quelltext, aber dazu sp\u00e4ter mehr.<\/p>\n<h3>YAML-Datei importieren<\/h3>\n<p>Unsere bisherigen Konfigurationen zum CKEditor befinden sich in einer eigenen YAML-Datei. In diese Datei wird jetzt noch die Plugin-YAML-Datei geladen.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\"># Load processing options\r\nimports:\r\n  ...\r\n  - resource: EXT:cs_ckeditor_example\/Configuration\/RTE\/Plugin.yaml\r\n  ...\r\n\r\neditor:\r\n  ...<\/pre>\n<p>Die drei Punkte sind an dieser Stelle lediglich als Platzhalter f\u00fcr weitere Konfigurationen. Wichtig ist nur, dass die Plugin-Datei wie angegeben importiert wird.<\/p>\n<p>Das Plugin ist registriert und wird geladen. Alles weitere passiert im JavaScript.<\/p>\n<h2>Einen Button im CKEditor hinzuf\u00fcgen<\/h2>\n<p>Das Grundger\u00fcst im JavaScript f\u00fcr unser Plugin sieht wie folgt aus.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">(function() {\r\n   'use strict';\r\n\r\n   var $;\r\n   require(['jquery'], function (jquery) {\r\n      $ = jquery;\r\n   });\r\n\r\n   CKEDITOR.plugins.add('tx_csckeditorexample', {\r\n      icons: 'reformat-example',\r\n      init: function( editor ) {\r\n            ...\r\n         editor.ui.addButton( 'ReformatExample', {\r\n            label: 'Reformat Text',\r\n            command: 'reformatExample',\r\n            toolbar: 'editing',\r\n            icon: this.path + 'icons\/reformat-example.png',\r\n         });\r\n      }\r\n   });\r\n}());<\/pre>\n<p>Im ersten Teil wird erm\u00f6glicht, dass <a href=\"https:\/\/jquery.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery<\/a> im Plugin verwendet werden kann. Mit\u00a0<code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">CKEDITOR.plugins.add('pluginName', {Konfiguration})<\/code> wird das Plugin dem Editor hinzugef\u00fcgt.<\/p>\n<p>Unter <code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">icons<\/code> wird der Icon-Name des Plugins angegeben. Dieser entspricht dem Button-Namen und wird kleingeschrieben.<\/p>\n<h3>Den Button definieren<\/h3>\n<p>Der Button an sich wird dann in der init-Funktion hinzugef\u00fcgt mit <code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">editor.ui.addButton( 'ButtonName', {Konfiguration})<\/code>.<\/p>\n<p>Das Label erscheint, wenn der Redakteur \u00fcber den Button f\u00e4hrt. <code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">command<\/code> verweist auf das Kommando was ausgef\u00fchrt wird, wenn der Button geklickt wird. Dazu gleich mehr.<\/p>\n<p>Mit <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">toolbar<\/code> wird angegeben, in welcher Werkzeug-Gruppe der Button platziert werden soll. Die Toolbars werden in der allgemeinen YAML-Datei definiert.<\/p>\n<p>Schlie\u00dflich wird der Pfad zum Button-Icon angegeben. Der Einfachheit halber liegt die Grafik im Unterordner <em>icons<\/em>, ausgehend von der JavaScript-Datei.<\/p>\n<h3>Das Resultat<\/h3>\n<p>Diese Zeilen Code sorgen bereits daf\u00fcr, dass wir in unserem CKEditor einen neuen Button sehen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4046\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/ckeditor-plugin-typo3.png\" alt=\"Neuer Button beim CKEditor im TYPO3\" width=\"694\" height=\"467\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/ckeditor-plugin-typo3.png 694w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/ckeditor-plugin-typo3-300x202.png 300w\" sizes=\"auto, (max-width: 694px) 100vw, 694px\" \/><\/p>\n<p>Nun gilt es nur noch, dass bei Klick auf den Button auch etwas passiert.<\/p>\n<h2>Die Funktionalit\u00e4t des Plugins<\/h2>\n<p>Kommen wir zur eigentlichen Funktionalit\u00e4t von unserem Plugin. Dazu f\u00fcgen wir weiteren Code in der init-Funktion hinzu.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">init: function( editor ) {   \r\n   editor.addCommand( 'reformatTrb', {\r\n      exec: function( editor ) {\r\n         var boldRegex = \/\\*([^\\*]+)\\*\/gm;\r\n         var italicRegex = \/_([^_]+)_\/gm;\r\n\r\n         editor.focus();\r\n         editor.document.$.execCommand( 'SelectAll', false, null );\r\n         var parsedData = editor.getData();\r\n\r\n         parsedData = parsedData.replace(boldRegex, '&lt;b&gt;$1&lt;\/b&gt;');\r\n         parsedData = parsedData.replace(italicRegex, '&lt;i&gt;$1&lt;\/i&gt;');\r\n         editor.setData( parsedData );\r\n      }\r\n   });\r\n   ...\r\n});<\/pre>\n<p>Mit\u00a0<code class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">editor.addCommand( 'kommandoName', {Konfiguration})<\/code> wird ein neues Kommando registriert und definiert. In der exec-Funktion wird geschrieben, was passieren soll.<\/p>\n<p>Zun\u00e4chst werden die regul\u00e4ren Ausdr\u00fccke definiert, nach denen im Text gesucht werden soll. Anschlie\u00dfend wird der im Editor befindliche Text der Funktion zur Verf\u00fcgung gestellt. Darin werden die Formatierungen durch HTML-Auszeichnungen ersetzt. Letztendlich wird der neue Text im Editor platziert.<\/p>\n<p>Somit haben wir unser erstes eigenes Plugin f\u00fcr den CKEditor fertig gestellt. Der gesamte Quelltext ist nochmal auf <a href=\"https:\/\/github.com\/clickstorm\/cs_ckeditor_example\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a> zu finden.<\/p>\n<h2>Fazit<\/h2>\n<p>Wir haben gezeigt, dass der CKEditor in TYPO3 sich mit relativ wenig Aufwand erweitern l\u00e4sst. Ein eigenes Plugin ist schnell geschrieben und integriert. Zur Orientierung dienen die bereits zahlreich existierenden <a href=\"https:\/\/ckeditor.com\/cke4\/addons\/plugins\/all\" target=\"_blank\" rel=\"noopener noreferrer\">Plugins<\/a>, auch speziell f\u00fcr <a href=\"https:\/\/extensions.typo3.org\/?L=0&amp;id=1&amp;tx_solr%5Bq%5D=ckeditor\" target=\"_blank\" rel=\"noopener noreferrer\">TYPO3<\/a>.<\/p>\n<p>Wie bereits erw\u00e4hnt, findet Ihr eine Anleitung f\u00fcr die allgemeine Konfiguration des CKEditors in einem separaten <a href=\"https:\/\/www.clickstorm.de\/blog\/der-neue-typo3-rte-ckeditor\/\">Blogbeitrag<\/a>.<\/p>\n<p>Habt ihr selbst bereits ein Plugin f\u00fcr den CKEditor geschrieben oder Fragen zum Artikel? Dann schreibt gerne etwas in den Kommentaren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ein Plugin f\u00fcr den CKEditor im TYPO3 ist schnell geschrieben, wir zeigen wie.<\/p>\n","protected":false},"author":7,"featured_media":4058,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[135],"tags":[186,45,46,57,9],"class_list":["post-4041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cms","tag-editor","tag-entwicklung","tag-erweiterung","tag-extension","tag-typo3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"Um den CKEditor in TYPO3 zu erweitern ist ein eigenes Plugin notwendig. Erfahre hier, wie dieses schnell und einfach umgesetzt werden kann.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"Um den CKEditor in TYPO3 zu erweitern ist ein eigenes Plugin notwendig. Erfahre hier, wie dieses schnell und einfach umgesetzt werden kann.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-06T11:14:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-06T11:16:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/eigenes-plugin-ckeditor-entwickler-board_teaser-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"577\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/\"},\"author\":{\"name\":\"Marc\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/594fb824a2f049d33b2a1b4406bfc86b\"},\"headline\":\"Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben\",\"datePublished\":\"2019-09-06T11:14:24+00:00\",\"dateModified\":\"2019-09-06T11:16:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/\"},\"wordCount\":681,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/eigenes-plugin-ckeditor-entwickler-board_teaser-01.jpg\",\"keywords\":[\"Editor\",\"Entwicklung\",\"Erweiterung\",\"Extension\",\"TYPO3\"],\"articleSection\":[\"CMS\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/\",\"name\":\"Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/eigenes-plugin-ckeditor-entwickler-board_teaser-01.jpg\",\"datePublished\":\"2019-09-06T11:14:24+00:00\",\"dateModified\":\"2019-09-06T11:16:30+00:00\",\"description\":\"Um den CKEditor in TYPO3 zu erweitern ist ein eigenes Plugin notwendig. Erfahre hier, wie dieses schnell und einfach umgesetzt werden kann.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/eigenes-plugin-ckeditor-entwickler-board_teaser-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/eigenes-plugin-ckeditor-entwickler-board_teaser-01.jpg\",\"width\":1170,\"height\":577,\"caption\":\"Eigenes Plugin CKEditor | Entwickler scribbelt am Glasboard\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/plugin-ckeditor-erweitern-typo3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/594fb824a2f049d33b2a1b4406bfc86b\",\"name\":\"Marc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"caption\":\"Marc\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/marc\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben - clickstorm Blog","description":"Um den CKEditor in TYPO3 zu erweitern ist ein eigenes Plugin notwendig. Erfahre hier, wie dieses schnell und einfach umgesetzt werden kann.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/","og_locale":"de_DE","og_type":"article","og_title":"Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben - clickstorm Blog","og_description":"Um den CKEditor in TYPO3 zu erweitern ist ein eigenes Plugin notwendig. Erfahre hier, wie dieses schnell und einfach umgesetzt werden kann.","og_url":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2019-09-06T11:14:24+00:00","article_modified_time":"2019-09-06T11:16:30+00:00","og_image":[{"width":1170,"height":577,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/eigenes-plugin-ckeditor-entwickler-board_teaser-01.jpg","type":"image\/jpeg"}],"author":"Marc","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Marc","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/"},"author":{"name":"Marc","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/594fb824a2f049d33b2a1b4406bfc86b"},"headline":"Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben","datePublished":"2019-09-06T11:14:24+00:00","dateModified":"2019-09-06T11:16:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/"},"wordCount":681,"commentCount":4,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/eigenes-plugin-ckeditor-entwickler-board_teaser-01.jpg","keywords":["Editor","Entwicklung","Erweiterung","Extension","TYPO3"],"articleSection":["CMS"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/","url":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/","name":"Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/eigenes-plugin-ckeditor-entwickler-board_teaser-01.jpg","datePublished":"2019-09-06T11:14:24+00:00","dateModified":"2019-09-06T11:16:30+00:00","description":"Um den CKEditor in TYPO3 zu erweitern ist ein eigenes Plugin notwendig. Erfahre hier, wie dieses schnell und einfach umgesetzt werden kann.","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/eigenes-plugin-ckeditor-entwickler-board_teaser-01.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2019\/09\/eigenes-plugin-ckeditor-entwickler-board_teaser-01.jpg","width":1170,"height":577,"caption":"Eigenes Plugin CKEditor | Entwickler scribbelt am Glasboard"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/plugin-ckeditor-erweitern-typo3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Ein eigenes Plugin f\u00fcr den CKEditor in TYPO3 schreiben"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/594fb824a2f049d33b2a1b4406bfc86b","name":"Marc","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","caption":"Marc"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/marc\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/4041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=4041"}],"version-history":[{"count":11,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/4041\/revisions"}],"predecessor-version":[{"id":5892,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/4041\/revisions\/5892"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=4041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=4041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=4041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}