From d1b30965b47a248018b5323df47cd79308ef0026 Mon Sep 17 00:00:00 2001
From: mrothauer <office@rothauer-it.com>
Date: Mon, 12 Feb 2024 09:50:24 +0100
Subject: [PATCH] replace ckeditor with jodit

---
 .eslintrc.js                                  |  5 +-
 config/app_config.php                         |  4 +-
 config/asset_compress.ini                     |  8 ++
 config/elfinder/elfinder.html                 | 83 ----------------
 devtools/npm-post-install.sh                  |  1 -
 plugins/Admin/templates/Knowledges/edit.php   |  6 +-
 plugins/Admin/templates/Pages/edit.php        |  6 +-
 plugins/Admin/templates/Posts/edit.php        |  6 +-
 plugins/Admin/templates/layout/default.php    |  3 -
 src/Controller/AppController.php              |  6 +-
 templates/Workshops/edit.php                  |  6 +-
 .../{ckeditorEdit.php => editorEdit.php}      |  5 +-
 templates/element/post.php                    |  4 +-
 templates/layout/default.php                  |  3 -
 webroot/css/frontend.css                      | 55 ++++++++---
 webroot/css/mobile-frontend.css               |  4 +-
 .../js/ckeditor/config-without-elfinder.js    | 46 ---------
 webroot/js/ckeditor/config.js                 | 49 ----------
 webroot/js/editor.js                          | 95 +++++++++++++++++++
 webroot/js/helper.js                          | 48 ----------
 webroot/js/modal-elfinder.js                  |  2 +
 webroot/package-lock.json                     | 42 +++++---
 webroot/package.json                          |  2 +-
 23 files changed, 208 insertions(+), 281 deletions(-)
 delete mode 100644 config/elfinder/elfinder.html
 rename templates/element/{ckeditorEdit.php => editorEdit.php} (74%)
 delete mode 100644 webroot/js/ckeditor/config-without-elfinder.js
 delete mode 100644 webroot/js/ckeditor/config.js
 create mode 100644 webroot/js/editor.js
 create mode 100644 webroot/js/modal-elfinder.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 8a102dd5a..50fbb523c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,12 +4,15 @@ module.exports = {
         "jquery": true,
         "es6": true
     },
+    "parserOptions": {
+        "ecmaVersion": 2020
+    },
     "ignorePatterns": ["webroot/js/elFinder/"],
     "globals": {
         "Chart": true,
         "ChartDataLabels": true,
-        "CKEDITOR": true,
         "ClipboardJS": true,
+        "Jodit": true,
         "MappedRepairEvents": true,
         "PruneCluster": true,
         "PruneClusterForLeaflet": true,
diff --git a/config/app_config.php b/config/app_config.php
index c65309a91..0d8d7094e 100644
--- a/config/app_config.php
+++ b/config/app_config.php
@@ -18,8 +18,8 @@
 define('CACHE_PERSISTENT_DIR', CACHE_DIR . 'persistent/');
 define('CACHE_VIEWS_DIR', CACHE_DIR . 'views/');
 
-define('ALLOWED_TAGS_CKEDITOR_USER', '<a><b><strong><i><img><p><h1><h2><ul><li><hr><em><br>');
-define('ALLOWED_TAGS_CKEDITOR_ADMIN', ALLOWED_TAGS_CKEDITOR_USER . '<iframe>');
+define('ALLOWED_TAGS_EDITOR_USER', '<a><b><strong><i><img><p><h1><h2><h3><ul><li><hr><em><br>');
+define('ALLOWED_TAGS_EDITOR_ADMIN', ALLOWED_TAGS_EDITOR_USER . '<iframe>');
 define('ALLOWED_TAGS_USER', '<a><b><strong><i><br><p><ul><li>'); // für textfelder (zb. additional_contact)
 
 define('FILES_DIR', '/files/');
diff --git a/config/asset_compress.ini b/config/asset_compress.ini
index af21bb107..f1afd1d23 100644
--- a/config/asset_compress.ini
+++ b/config/asset_compress.ini
@@ -12,6 +12,7 @@ paths[] = WEBROOT/node_modules
 cachePath = WEBROOT/cache/
 filters[] = SimpleCssMin
 paths[] = WEBROOT/css
+paths[] = WEBROOT/js
 paths[] = WEBROOT/node_modules
 
 [_base.css]
@@ -23,6 +24,9 @@ files[] = @fortawesome/fontawesome-free/css/all.css
 files[] = frontend.css
 files[] = table.css
 files[] = right.css
+files[] = elfinder/css/elfinder.full.css
+files[] = elfinder/css/theme.css
+files[] = jodit/es2021/jodit.css
 files[] = featherlight/src/featherlight.css
 files[] = featherlight/src/featherlight.gallery.css
 files[] = jQuery-Impromptu/dist/jquery-impromptu.css
@@ -62,6 +66,10 @@ files[] = speakingurl/lib/speakingurl.js
 files[] = jquery-slugify/dist/slugify.js
 files[] = select2/dist/js/select2.full.js
 files[] = select2/dist/js/i18n/de.js
+files[] = elfinder/js/elfinder.min.js
+files[] = jodit/es2021/jodit.js
+files[] = editor.js
+files[] = modal-elfinder.js
 files[] = detect.js
 files[] = clipboard/dist/clipboard.js
 files[] = helper.js
diff --git a/config/elfinder/elfinder.html b/config/elfinder/elfinder.html
deleted file mode 100644
index 9d497a2ae..000000000
--- a/config/elfinder/elfinder.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
-		<title>elFinder 2.1.x source version with PHP connector</title>
-
-		<!-- Require JS (REQUIRED) -->
-		<!-- Rename "main.default.js" to "main.js" and edit it if you need configure elFInder options or any things -->
-		<script data-main="./main.default.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
-		<script>
-			define('elFinderConfig', {
-				// elFinder options (REQUIRED)
-				// Documentation for client options:
-				// https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
-				defaultOpts : {
-					url : 'php/connector.minimal.php' // connector URL (REQUIRED)
-				    ,commands : [
-				        'rename', 'delete', 'upload', 'quicklook'
-		            ]
-					,commandsOptions : {
-						edit : {
-							extraOptions : {
-								// set API key to enable Creative Cloud image editor
-								// see https://console.adobe.io/
-								creativeCloudApiKey : '',
-								// browsing manager URL for CKEditor, TinyMCE
-								// uses self location with the empty value
-								managerUrl : ''
-							}
-						}
-						,quicklook : {
-							// to enable preview with Google Docs Viewer
-							googleDocsMimes : ['application/pdf', 'image/tiff', 'application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
-						}
-					}
-					// bootCalback calls at before elFinder boot up 
-					,bootCallback : function(fm, extraObj) {
-						/* any bind functions etc. */
-						fm.bind('init', function() {
-							// any your code
-						});
-						// for example set document.title dynamically.
-						var title = document.title;
-						fm.bind('open', function() {
-							var path = '',
-								cwd  = fm.cwd();
-							if (cwd) {
-								path = fm.path(cwd.hash) || null;
-							}
-							document.title = path? path + ':' + title : title;
-						}).bind('destroy', function() {
-							document.title = title;
-						});
-					}
-				},
-				managers : {
-					// 'DOM Element ID': { /* elFinder options of this DOM Element */ }
-					'elfinder': {
-					    getFileCallback : function(file, fm) {
-				            window.opener.CKEDITOR.tools.callFunction((function() {
-				                var reParam = new RegExp('(?:[\?&]|&amp;)CKEditorFuncNum=([^&]+)', 'i') ;
-				                var match = window.location.search.match(reParam) ;
-				                return (match && match.length > 1) ? match[1] : '' ;
-				            })(), fm.convAbsUrl(file.url));
-				            fm.destroy();
-				            window.close();
-				        }
-				        , height : '100%'   // optional
-				        , resizable : false // optional
-					}
-				}
-			});
-		</script>
-	</head>
-	<body>
-
-		<!-- Element where elFinder will be created (REQUIRED) -->
-		<div id="elfinder"></div>
-
-	</body>
-</html>
diff --git a/devtools/npm-post-install.sh b/devtools/npm-post-install.sh
index b460cfe98..e01febad7 100644
--- a/devtools/npm-post-install.sh
+++ b/devtools/npm-post-install.sh
@@ -12,5 +12,4 @@ cp -R $APP/webroot/node_modules/@fortawesome/fontawesome-free/webfonts $APP/webr
 cp -R $APP/webroot/node_modules/jquery-ui/dist/themes/smoothness/images $APP/webroot/cache
 cp -R $APP/webroot/node_modules/leaflet/dist/images $APP/webroot/cache
 
-cp $APP/config/elfinder/elfinder.html $APP/webroot/js/elfinder/elfinder.html
 cp $APP/config/elfinder/php/connector.minimal.php $APP/webroot/js/elfinder/php/connector.minimal.php
diff --git a/plugins/Admin/templates/Knowledges/edit.php b/plugins/Admin/templates/Knowledges/edit.php
index 1cf8e2d0d..2510beb11 100644
--- a/plugins/Admin/templates/Knowledges/edit.php
+++ b/plugins/Admin/templates/Knowledges/edit.php
@@ -62,9 +62,9 @@
     <?php
         echo $this->element('cancelAndSaveButton');
     ?>
-    <div class="ckeditor-edit">
+    <div class="editor-edit">
       <?php
-        echo $this->element('ckeditorEdit', [
+        echo $this->element('editorEdit', [
            'value' => $knowledge->text,
            'name' => 'Knowledges.text',
            'uid' => $uid,
@@ -80,4 +80,4 @@
 
 </div>
 
-<div class="sc"></div> <?php /* wegen ckeditor */ ?>
\ No newline at end of file
+<div class="sc"></div> <?php /* wegen editor */ ?>
\ No newline at end of file
diff --git a/plugins/Admin/templates/Pages/edit.php b/plugins/Admin/templates/Pages/edit.php
index c2fbc0e15..b307ff7ac 100644
--- a/plugins/Admin/templates/Pages/edit.php
+++ b/plugins/Admin/templates/Pages/edit.php
@@ -56,9 +56,9 @@
         echo $this->element('cancelAndSaveButton');
     ?>
 
-    <div class="ckeditor-edit">
+    <div class="editor-edit">
         <?php
-            echo $this->element('ckeditorEdit', [
+            echo $this->element('editorEdit', [
               'value' => $page->text,
               'name' => 'Pages.text',
               'uid' => $uid,
@@ -75,4 +75,4 @@
 
 </div>
 
-<div class="sc"></div> <?php /* wegen ckeditor */ ?>
\ No newline at end of file
+<div class="sc"></div> <?php /* wegen editor */ ?>
\ No newline at end of file
diff --git a/plugins/Admin/templates/Posts/edit.php b/plugins/Admin/templates/Posts/edit.php
index c2486cff0..ab9135931 100644
--- a/plugins/Admin/templates/Posts/edit.php
+++ b/plugins/Admin/templates/Posts/edit.php
@@ -68,9 +68,9 @@
     <?php
         echo $this->element('cancelAndSaveButton');
     ?>
-    <div class="ckeditor-edit">
+    <div class="editor-edit">
       <?php
-        echo $this->element('ckeditorEdit', [
+        echo $this->element('editorEdit', [
            'value' => $post->text,
            'name' => 'Posts.text',
            'uid' => $uid,
@@ -87,4 +87,4 @@
 
 </div>
 
-<div class="sc"></div> <?php /* wegen ckeditor */ ?>
\ No newline at end of file
+<div class="sc"></div> <?php /* wegen editor */ ?>
\ No newline at end of file
diff --git a/plugins/Admin/templates/layout/default.php b/plugins/Admin/templates/layout/default.php
index 236417ca2..2cda39a0c 100644
--- a/plugins/Admin/templates/layout/default.php
+++ b/plugins/Admin/templates/layout/default.php
@@ -69,9 +69,6 @@
   <?php
     echo $this->AssetCompress->script('_admin', array('raw' => Configure::read('debug')));
 
-    echo $this->Html->script('/node_modules/ckeditor4/ckeditor.js?v4.19.0');
-    echo $this->Html->script('/node_modules/ckeditor4/adapters/jquery.js?v4.19.0');
-
     echo $this->Html->scriptBlock(
         $this->Html->wrapJavascriptBlock(
             JS_NAMESPACE.".Admin.init();"
diff --git a/src/Controller/AppController.php b/src/Controller/AppController.php
index 6e3f77d8d..a53f7ef9b 100644
--- a/src/Controller/AppController.php
+++ b/src/Controller/AppController.php
@@ -287,10 +287,10 @@ protected function stripTagsFromFields($entity, $modelName)
                     $entity->$field = strip_tags($data, ALLOWED_TAGS_USER);
                 }
             } else if ($field == 'text') {
-                // ckeditor feld heißt normalerweise 'text'
-                $allowedTags = ALLOWED_TAGS_CKEDITOR_USER;
+                // editor feld heißt normalerweise 'text'
+                $allowedTags = ALLOWED_TAGS_EDITOR_USER;
                 if ($this->isAdmin() && in_array($modelName, ['Post', 'Page', 'Knowledge'])) {
-                    $allowedTags =  ALLOWED_TAGS_CKEDITOR_ADMIN;
+                    $allowedTags =  ALLOWED_TAGS_EDITOR_ADMIN;
                 }
                 if (!is_null($data)) {
                     $entity->$field = strip_tags($data, $allowedTags);
diff --git a/templates/Workshops/edit.php b/templates/Workshops/edit.php
index c6021dcd3..13537341f 100644
--- a/templates/Workshops/edit.php
+++ b/templates/Workshops/edit.php
@@ -114,9 +114,9 @@
     </div>
 
 
-    <div class="ckeditor-edit">
+    <div class="editor-edit">
       <?php
-        echo $this->element('ckeditorEdit', [
+        echo $this->element('editorEdit', [
             'value' => $workshop->text,
             'name' => 'Workshops.text',
             'uid' => $workshop->uid,
@@ -141,4 +141,4 @@
 
 </div>
 
-<div class="sc"></div> <?php /* wegen ckeditor */ ?>
\ No newline at end of file
+<div class="sc"></div> <?php /* wegen editor */ ?>
\ No newline at end of file
diff --git a/templates/element/ckeditorEdit.php b/templates/element/editorEdit.php
similarity index 74%
rename from templates/element/ckeditorEdit.php
rename to templates/element/editorEdit.php
index 49ce6357c..5c69cb8c2 100644
--- a/templates/element/ckeditorEdit.php
+++ b/templates/element/editorEdit.php
@@ -6,11 +6,11 @@
 if ($uid === null) {
     echo '<p style="margin-bottom: 10px;clear: both;">Um Bilder und Dateien hochzuladen, bitte zuerst speichern.</p>';
     $this->element('addScript', ['script' =>
-        JS_NAMESPACE . ".Helper.initCkeditorWithoutElfinder('".$convertedName."', ".$this->request->getSession()->read('isMobile').");"
+        JS_NAMESPACE . ".Editor.init('".$convertedName."', ".$this->request->getSession()->read('isMobile').");"
     ]);
 } else {
     $this->element('addScript', ['script' =>
-        JS_NAMESPACE . ".Helper.initCkeditor('".$convertedName."', ".$this->request->getSession()->read('isMobile').");"
+        JS_NAMESPACE . ".Editor.initWithUpload('".$convertedName."', ".$this->request->getSession()->read('isMobile').");"
     ]);
 }
 
@@ -27,7 +27,6 @@
         'value' => $value,
         'label' => '',
         'style' => 'width:610px;',
-        'class' => 'ckeditor'
     ]
 );
 
diff --git a/templates/element/post.php b/templates/element/post.php
index de2f83ad8..d36cce7f5 100644
--- a/templates/element/post.php
+++ b/templates/element/post.php
@@ -81,7 +81,7 @@
     }
 
 //detail
-echo '<div class="ckeditor-text">';
+echo '<div class="editor-text">';
 
 if ($showImage) {
       if ($type == 'preview') {
@@ -106,7 +106,7 @@
 
 echo '<br /><br />';
 
-echo '</div>'; // .ckeditor-text
+echo '</div>'; // .editor-text
 echo '</div>'; // .image-text-wrapper
 
 echo '</div>'; // .text-wrapper
diff --git a/templates/layout/default.php b/templates/layout/default.php
index 8b25b116a..9d057710b 100644
--- a/templates/layout/default.php
+++ b/templates/layout/default.php
@@ -119,9 +119,6 @@
 
             echo $this->AssetCompress->script('_frontend' . ($this->request->getSession()->read('isMobile') ? '_mobile' : ''), ['raw' => Configure::read('debug')]);
 
-            echo $this->Html->script('/node_modules/ckeditor4/ckeditor.js?v4.19.0');
-            echo $this->Html->script('/node_modules/ckeditor4/adapters/jquery.js?v4.19.0');
-
             // add script BEFORE all scripts that are loaded in views (block)
             echo $this->Html->scriptBlock(
                 $this->Html->wrapJavascriptBlock(
diff --git a/webroot/css/frontend.css b/webroot/css/frontend.css
index ea53eadc2..68cf36486 100644
--- a/webroot/css/frontend.css
+++ b/webroot/css/frontend.css
@@ -111,7 +111,6 @@ h3 {
     text-transform: uppercase;
     font-weight: bold;
     font-size: 13px;
-    float: left;
     color: black;
 }
 .green {
@@ -1503,7 +1502,7 @@ body.blogs.detail h1 {
     margin: 0px 0px 0px 0px;
 }
 div.text-wrapper,
-div.ckeditor-text,
+div.editor-text,
 .blog-detail div.text-wrapper,
 #framedContent div.text-wrapper {
     line-height: 22px;
@@ -1536,8 +1535,8 @@ div.ckeditor-text,
     margin: 15px 0px 30px 0px;
     padding: 0px 0px 10px 0px;
 }
-.ckeditor-text img,
-.ckeditor-text iframe {
+.editor-text img,
+.editor-text iframe {
     max-width: 1160px;
     float: left;
     margin: 2px 10px 20px 0px;
@@ -2566,11 +2565,11 @@ body.posts.detail .left .image-text {
   margin-top: 5px;
   margin-bottom: 5px;
 }
-body.posts.detail .right .ckeditor-text img,
-.ckeditor-text iframe {
+body.posts.detail .right .editor-text img,
+.editor-text iframe {
   max-width: 540px;
 }
-body.posts.detail .right .ckeditor-text img {
+body.posts.detail .right .editor-text img {
   height: auto ! important;
 }
 body.featherlight:not(.featherlight-swipe-aware) .featherlight-image {
@@ -3440,7 +3439,6 @@ div.admin div.edit.categories {
     margin-left: 0px;
     width: 185px;
     min-height: 975px;
-    /* damit in ff auf windows 7 der ckeditor bei 1024 breite ganz links ist */
 }
 
 div.admin div.edit.categories fieldset {
@@ -3486,7 +3484,7 @@ div.admin div.categories-edit {
     width: 620px;
     float: left;
 }
-div.admin div.ckeditor-edit {
+div.admin div.editor-edit {
     float: left;
     margin: 5px 0;
 }
@@ -3604,7 +3602,7 @@ div.admin div.edit div.small input {
     width: 74px;
 }
 
-div.admin div.ckeditor {
+div.admin div.editor {
     clear: both;
 }
 
@@ -3638,7 +3636,7 @@ div.admin div.edit h2.metatags {
     float: left;
 }
 
-.ckeditor {
+.editor {
     clear: both;
 }
 
@@ -3734,6 +3732,41 @@ body.users.profil .add-skill {
 #mapHomeInfoBox > * {
     float: left;
 }
+
+.jodit-container {
+    margin-bottom: 10px;
+    float: right;
+    line-height: 22px;
+    font-size: 13px;
+}
+.jodit-container h2,
+.jodit-container h3 {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+.jodit-container ul {
+    padding-left: 20px ! important;
+}
+.jodit-container ul,
+.jodit-container ul li {
+    list-style: disc;
+}
+.jodit-container ol,
+.jodit-container ol li {
+    list-style: decimal;
+}
+.jodit-container .jodit-add-new-line {
+    display: none ! important;
+}
+.jodit-ui-input__input {
+    width: 100% ! important;
+    padding: 0 8px ! important;
+}
+/* fix path for packed css */
+.elfinder-button-icon {
+    background-image: url(/js/elfinder/img/toolbar.png);
+}
+
 @media (max-width: 767px) {
     #wrapper {
         width: 100%;
diff --git a/webroot/css/mobile-frontend.css b/webroot/css/mobile-frontend.css
index ad087ab79..8c41f8d4c 100644
--- a/webroot/css/mobile-frontend.css
+++ b/webroot/css/mobile-frontend.css
@@ -175,8 +175,8 @@
         text-align: left;
         margin-top: 15px;
     }
-    .right .ckeditor-edit img,
-    .ckeditor-edit iframe {
+    .right .editor-edit img,
+    .editor-edit iframe {
         max-width: 100% ! important;
     }
     body.workshops.detail .address-wrapper a {
diff --git a/webroot/js/ckeditor/config-without-elfinder.js b/webroot/js/ckeditor/config-without-elfinder.js
deleted file mode 100644
index a53302174..000000000
--- a/webroot/js/ckeditor/config-without-elfinder.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.html or http://ckeditor.com/license
- */
-
-CKEDITOR.editorConfig = function( config ) {
-    // Define changes to default configuration here.
-    // For the complete reference:
-    // http://docs.ckeditor.com/#!/api/CKEDITOR.config
-
-    config.format_tags = 'p;h2;h3;h4';
-    config.language = 'de';
-    config.allowedContent = true; // allow iframe and co...
-    config.entities = false;
-
-    config.extraPlugins = 'showblocks,justify,format';
-
-    config.startupOutlineBlocks = true;
-    config.forcePasteAsPlainText = true;
-
-    // The toolbar groups arrangement, optimized for two toolbar rows.
-    config.toolbarGroups = [
-        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
-        { name: 'editing',     groups: [ 'find', 'selection' ] },
-        { name: 'links' },
-        { name: 'insert' },
-        { name: 'forms' },
-        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
-        { name: 'paragraph',   groups: [ 'list', 'blocks', 'align', 'bidi' ] },
-        { name: 'colors' },
-        { name: 'styles' },
-        { name: 'tools' },
-        { name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
-        { name: 'others' },
-    ];
-
-    // Remove some buttons, provided by the standard plugins, which we don't
-    // need to have in the Standard(s) toolbar.
-    config.removeButtons = 'Underline,Subscript,Superscript,Strike,Paste,PasteText,Anchor,Table,HorizontalRule,SpecialChar,Maximize,ShowBlocks,Blockquote,Styles';
-
-
-    // Make dialogs simpler.
-    //config.removeDialogTabs = 'image:advanced;link:advanced';
-};
-
-CKEDITOR.timestamp = 'elfinder-integration'; // change this string if version is updated
\ No newline at end of file
diff --git a/webroot/js/ckeditor/config.js b/webroot/js/ckeditor/config.js
deleted file mode 100644
index 9312afee8..000000000
--- a/webroot/js/ckeditor/config.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.html or http://ckeditor.com/license
- */
-
-CKEDITOR.editorConfig = function( config ) {
-    // Define changes to default configuration here.
-    // For the complete reference:
-    // http://docs.ckeditor.com/#!/api/CKEDITOR.config
-
-    config.format_tags = 'p;h2;h3;h4';
-    config.language = 'de';
-    config.allowedContent = true; // allow iframe and co...
-    config.entities = false;
-
-    config.extraPlugins = 'showblocks,justify,format';
-
-    config.startupOutlineBlocks = true;
-    config.forcePasteAsPlainText = true;
-
-    config.filebrowserBrowseUrl = '/js/elfinder/elfinder.html';
-    config.filebrowserImageBrowseUrl = '/js/elfinder/elfinder.html';
-
-    // The toolbar groups arrangement, optimized for two toolbar rows.
-    config.toolbarGroups = [
-        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
-        { name: 'editing',     groups: [ 'find', 'selection' ] },
-        { name: 'links' },
-        { name: 'insert' },
-        { name: 'forms' },
-        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
-        { name: 'paragraph',   groups: [ 'list', 'blocks', 'align', 'bidi' ] },
-        { name: 'colors' },
-        { name: 'styles' },
-        { name: 'tools' },
-        { name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
-        { name: 'others' },
-    ];
-
-    // Remove some buttons, provided by the standard plugins, which we don't
-    // need to have in the Standard(s) toolbar.
-    config.removeButtons = 'Underline,Subscript,Superscript,Strike,Paste,PasteText,Table,HorizontalRule,SpecialChar,Maximize,ShowBlocks,Blockquote,Styles';
-
-
-    // Make dialogs simpler.
-    //config.removeDialogTabs = 'image:advanced;link:advanced';
-};
-
-CKEDITOR.timestamp = 'v4.22.1'; // change this string if version is updated
\ No newline at end of file
diff --git a/webroot/js/editor.js b/webroot/js/editor.js
new file mode 100644
index 000000000..df02d63fa
--- /dev/null
+++ b/webroot/js/editor.js
@@ -0,0 +1,95 @@
+MappedRepairEvents.Editor = {
+
+    getDefaultOptions: function () {
+        return {
+            controls: {
+                ul: {
+                    list: Jodit.atom({
+                        default: 'Default',
+                    })
+                },
+                ol: {
+                    list: Jodit.atom({
+                        default: 'Default',
+                    })
+                },
+                paragraph: {
+                    list: Jodit.atom({
+                        p: 'Normal',
+                        h2: 'Heading 2',
+                        h3: 'Heading 3',
+                    }),
+                },
+            },
+            enter: 'br',
+            hidePoweredByJodit: true,
+            language: 'de',
+            toolbarAdaptive: false,
+            showPlaceholder: false,
+            showCharsCounter: false,
+            showWordsCounter: false,
+            showXPathInStatusbar: false,
+            defaultActionOnPaste: 'insert_clear_html',
+        };
+    },
+
+    getUploadButton: function() {
+        var button = {
+            name: 'Upload',
+            tooltip: 'Datei oder Bild hochladen',
+            exec: (editor) => {
+                //MappedRepairEvents.ModalElfinder.init(editor);
+            }
+        };
+        return button;
+    },
+
+    init: function (name, startupFocus) {
+
+        const editor = Jodit.make('textarea#' + name, {
+            ... this.getDefaultOptions(),
+            width: 627,
+            height: 650,
+            buttons: [
+                'bold', 'italic', 'brush',
+                '|', 'undo', 'redo', 'eraser',
+                '|', 'paragraph', 'ul', 'ol', 'hr',
+                '|', 'left', 'center', 'right',
+                '|', 'link', 'image',
+                '|', 'source',
+            ],
+        });
+
+        if (startupFocus) {
+            editor.selection.focus();
+        }
+
+        return editor;
+
+    },
+
+    initWithUpload: function (name, startupFocus) {
+
+        const editor = Jodit.make('textarea#' + name, {
+            ... this.getDefaultOptions(),
+            width: 627,
+            height: 650,
+            buttons: [
+                'bold', 'italic', 'brush',
+                '|', 'undo', 'redo', 'eraser',
+                '|', 'paragraph', 'ul', 'ol', 'hr',
+                '|', 'left', 'center', 'right',
+                '|', 'link', 'image', this.getUploadButton(),
+                '|', 'source',
+            ],
+        });
+
+        if (startupFocus) {
+            editor.selection.focus();
+        }
+
+        return editor;
+
+    },
+
+};
\ No newline at end of file
diff --git a/webroot/js/helper.js b/webroot/js/helper.js
index 7bf46e741..677b5881e 100644
--- a/webroot/js/helper.js
+++ b/webroot/js/helper.js
@@ -330,54 +330,6 @@ MappedRepairEvents.Helper = {
         }
     },
 
-    initCkeditor: function (name, isMobile) {
-
-        if (!CKEDITOR.env.isCompatible) {
-            return false;
-        }
-
-        this.destroyCkeditor(name);
-
-        CKEDITOR.timestamp = 'v4.22.1';
-        $('textarea#' + name + '.ckeditor').ckeditor({
-            customConfig: '/js/ckeditor/config.js',
-            height: isMobile ? 350 : 650,
-            width: isMobile ? '100%' : 627
-        });
-
-    },
-
-    destroyCkeditor: function (name) {
-
-        if (!CKEDITOR.env.isCompatible) {
-            return false;
-        }
-
-        var editor = CKEDITOR.instances[name];
-
-        if (editor) {
-            editor.destroy(true);
-        }
-
-    },
-
-    initCkeditorWithoutElfinder: function (name, isMobile) {
-
-        if (!CKEDITOR.env.isCompatible) {
-            return false;
-        }
-
-        this.destroyCkeditor(name);
-
-        CKEDITOR.timestamp = 'v4.22.1';
-        $('textarea#' + name + '.ckeditor').ckeditor({
-            customConfig: '/js/ckeditor/config-without-elfinder.js',
-            height: isMobile ? 350 : 650,
-            width: isMobile ? '100%' : 627
-        });
-
-    },
-
     doCurrentlyUpdatedActions : function(isCurrentlyUpdated) {
 
         if (!isCurrentlyUpdated) return;
diff --git a/webroot/js/modal-elfinder.js b/webroot/js/modal-elfinder.js
new file mode 100644
index 000000000..8be98323c
--- /dev/null
+++ b/webroot/js/modal-elfinder.js
@@ -0,0 +1,2 @@
+MappedRepairEvents.ModalElfinder = {
+}
\ No newline at end of file
diff --git a/webroot/package-lock.json b/webroot/package-lock.json
index 38ee8e308..4444b4234 100644
--- a/webroot/package-lock.json
+++ b/webroot/package-lock.json
@@ -13,11 +13,11 @@
         "blueimp-file-upload": "^10.32.0",
         "chart.js": "^4.4.1",
         "chartjs-plugin-datalabels": "^2.2.0",
-        "ckeditor4": "^4.22.1",
         "clipboard": "^2.0.11",
         "detect_swipe": "^2.1.4",
         "featherlight": "^1.7.14",
         "fullcalendar": "^6.1.10",
+        "jodit": "^4.0.6",
         "jquery": "^3.7.1",
         "jQuery-Impromptu": "https://github.com/trentrichardson/jQuery-Impromptu/tarball/master",
         "jquery-knob": "https://github.com/aterrien/jQuery-Knob/tarball/master",
@@ -105,6 +105,15 @@
       "resolved": "https://registry.npmjs.org/@sintef/prune-cluster/-/prune-cluster-2.1.0.tgz",
       "integrity": "sha512-SIU20mqBcuFJoVdX39dPQSeF/PU+Q6zVBhMHlgcUnaduaBvp8OjhKany+PefBwWYuJHcldv9UogXRwJffUfS1A=="
     },
+    "node_modules/autobind-decorator": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.4.0.tgz",
+      "integrity": "sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw==",
+      "engines": {
+        "node": ">=8.10",
+        "npm": ">=6.4.1"
+      }
+    },
     "node_modules/blueimp-canvas-to-blob": {
       "version": "3.27.0",
       "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.27.0.tgz",
@@ -158,11 +167,6 @@
         "chart.js": ">=3.0.0"
       }
     },
-    "node_modules/ckeditor4": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/ckeditor4/-/ckeditor4-4.22.1.tgz",
-      "integrity": "sha512-Yj4vTHX5YxHwc48gNqUqTm+KLkRr9tuyb4O2VIABu4oKHWRNVIdLdy6vUNe/XNx+RiTavMejfA1MVOU/MxLjqQ=="
-    },
     "node_modules/clipboard": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
@@ -212,6 +216,14 @@
         "delegate": "^3.1.2"
       }
     },
+    "node_modules/jodit": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/jodit/-/jodit-4.0.6.tgz",
+      "integrity": "sha512-UyWSwQyGhim30mmWo2GH5HKjSsQN5KdhEebajKun08PPKaglDJi7cTXOa5hEUKAgl1PLUsMVKrBWFZdRzcuG6A==",
+      "dependencies": {
+        "autobind-decorator": "^2.4.0"
+      }
+    },
     "node_modules/jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
@@ -390,6 +402,11 @@
       "resolved": "https://registry.npmjs.org/@sintef/prune-cluster/-/prune-cluster-2.1.0.tgz",
       "integrity": "sha512-SIU20mqBcuFJoVdX39dPQSeF/PU+Q6zVBhMHlgcUnaduaBvp8OjhKany+PefBwWYuJHcldv9UogXRwJffUfS1A=="
     },
+    "autobind-decorator": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.4.0.tgz",
+      "integrity": "sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw=="
+    },
     "blueimp-canvas-to-blob": {
       "version": "3.27.0",
       "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.27.0.tgz",
@@ -432,11 +449,6 @@
       "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
       "requires": {}
     },
-    "ckeditor4": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/ckeditor4/-/ckeditor4-4.22.1.tgz",
-      "integrity": "sha512-Yj4vTHX5YxHwc48gNqUqTm+KLkRr9tuyb4O2VIABu4oKHWRNVIdLdy6vUNe/XNx+RiTavMejfA1MVOU/MxLjqQ=="
-    },
     "clipboard": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
@@ -486,6 +498,14 @@
         "delegate": "^3.1.2"
       }
     },
+    "jodit": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/jodit/-/jodit-4.0.6.tgz",
+      "integrity": "sha512-UyWSwQyGhim30mmWo2GH5HKjSsQN5KdhEebajKun08PPKaglDJi7cTXOa5hEUKAgl1PLUsMVKrBWFZdRzcuG6A==",
+      "requires": {
+        "autobind-decorator": "^2.4.0"
+      }
+    },
     "jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
diff --git a/webroot/package.json b/webroot/package.json
index b54426816..8fbd08047 100644
--- a/webroot/package.json
+++ b/webroot/package.json
@@ -19,11 +19,11 @@
     "blueimp-file-upload": "^10.32.0",
     "chart.js": "^4.4.1",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "ckeditor4": "^4.22.1",
     "clipboard": "^2.0.11",
     "detect_swipe": "^2.1.4",
     "featherlight": "^1.7.14",
     "fullcalendar": "^6.1.10",
+    "jodit": "^4.0.6",
     "jquery": "^3.7.1",
     "jQuery-Impromptu": "https://github.com/trentrichardson/jQuery-Impromptu/tarball/master",
     "jquery-knob": "https://github.com/aterrien/jQuery-Knob/tarball/master",