diff --git a/extension/Classes/Core/QuickFormQuery.php b/extension/Classes/Core/QuickFormQuery.php
index cf12b7d0210b1dfacd08e37b1cb285ff3d270b28..48594cb1ec5b0f681bbd369ede6cc7a67d6200fe 100644
--- a/extension/Classes/Core/QuickFormQuery.php
+++ b/extension/Classes/Core/QuickFormQuery.php
@@ -1694,9 +1694,9 @@ class QuickFormQuery {
         if ($uid === null) {
             return '';
         }
-        $icon = Support::renderGlyphIcon(GLYPH_ICON_TASKS);
+        $icon = Support::renderGlyphIcon(GLYPH_ICON_EDIT);
         $showFormJs = '$("#tt-content-edit-' . $uid . '").toggleClass("hidden")';
-        $toggleBtn = Support::wrapTag("<a href='#' onclick='$showFormJs' style='float:right;'>", $icon);
+        $toggleBtn = Support::wrapTag("<a href='#' class='targetEditReport btn-xs btn-info' onclick='$showFormJs' style='float:right;'>", $icon);
 
         $saveBtnAttributes = Support::doAttribute('class', 'btn btn-default') .
             Support::doAttribute('id', "tt-content-save-$uid") .
@@ -1709,10 +1709,14 @@ class QuickFormQuery {
         $headerBar = Support::wrapTag("<div class='col-md-12 qfq-form-title'>", $header . $saveBtn);
 
         $ttContentCode = Support::htmlEntityEncodeDecode(MODE_ENCODE, $bodytext);
-        $codeBoxAttributes = Support::doAttribute('style', "width:100%;") .
+
+        $json = json_encode(array('mode'=>'text/x-sql','lineNumbers'=>true,'lineWrapping'=>true), JSON_UNESCAPED_SLASHES);
+        $codeBoxAttributes =  Support::doAttribute('style', "width:100%;") .
             Support::doAttribute('id', "tt-content-code-$uid") .
+            Support::doAttribute('name', REPORT_INLINE_BODYTEXT) .
+            Support::doAttribute('class', 'qfq-codemirror') .
             Support::doAttribute('rows', 20) .
-            Support::doAttribute('name', REPORT_INLINE_BODYTEXT);
+            Support::doAttribute('data-config', $json, true);
         $codeBox = Support::wrapTag("<textarea $codeBoxAttributes>", $ttContentCode);
 
         $form = join(' ', [$headerBar, $codeBox]);
diff --git a/javascript/src/Helper/codemirror.js b/javascript/src/Helper/codemirror.js
index bdbd068648305e475aa4dd2224c29a32f4bf60bf..46a2c8fc29f615e6eb59158ed2394798cbd3cd5c 100644
--- a/javascript/src/Helper/codemirror.js
+++ b/javascript/src/Helper/codemirror.js
@@ -64,4 +64,106 @@ QfqNS.Helper = QfqNS.Helper || {};
     n.codemirror = codemirror;
 
 
-})(QfqNS.Helper);
\ No newline at end of file
+})(QfqNS.Helper);
+
+// Seperate js to force codemirror for reports in frontend. No Form needed with this.
+$(document).ready(function(){
+    var externWindow = $(".externWindow");
+    var targetEditReportButton = $(".targetEditReport");
+    var htmlContent = $('');
+
+    // select all edit buttons from content records and remove onclick attribute to prevent showing content in primary window if clicked. onclick attribute is not removed in php to have the opportunity for old way of editing in front end.
+    if(targetEditReportButton !== undefined) {
+        for(var i = 0; targetEditReportButton.length > i; i++) {
+            var currentTarget = targetEditReportButton[i];
+            $(currentTarget).removeAttr("onclick");
+        }
+    }
+
+    // We prepare the content for extern window and show it. Only if onclick doesn't exist. Compatibility for old way is given this way.
+    $(targetEditReportButton).click(function() {
+        if(!$(this).is("[onclick]")){
+            var formContent = $($(this).next()[0].outerHTML);
+            showHtmlEditor(formContent);
+        }
+    });
+
+    //function to show editor window
+    function showHtmlEditor(formContent) {
+        $(formContent[0]).removeAttr("class");
+        $(formContent[0]).addClass("externWindow");
+        var idNameForWindow = $(formContent[0]).attr('id');
+        htmlContent = $("head").html() + $(formContent)[0].outerHTML;
+        newWindow(idNameForWindow);
+    }
+
+    // function to create new window with given content for editing
+    function newWindow(windowName) {
+        var w = window.open('',windowName, 'width=900,height=700');
+        w.document.write(htmlContent);
+        w.document.close();
+    }
+
+    // Show same content editor with refreshed data again after save. Control it with the given get parameter. First fetch only needed html content again (form) and open it in same window.
+    var urlParams = new URLSearchParams(window.location.search);
+    var ttContentParam = urlParams.get('tt-content');
+    var pageId = urlParams.get('id');
+    if(pageId === null){
+        pageId = '';
+    }else{
+        pageId = 'id='+pageId+'&';
+    }
+
+    if(ttContentParam !== null && $(targetEditReportButton).next("#"+ttContentParam)[0] !== undefined){
+        var formContent = $($(targetEditReportButton).next("#"+ttContentParam)[0].outerHTML);
+       showHtmlEditor(formContent);
+    }
+
+    // execute changes(post) and reload page with id of tt-content as get parameter. Staying in same window with new content.
+    $(externWindow).submit(function() {
+        $.post($(externWindow).attr('action'),$(externWindow).serializeArray());
+        $('<div style="text-align: right; margin-top: 10px;"><span style="background-color: green;" class="badge badge-success">Saved</span></div>')
+            .insertAfter('.btn-default')
+            .delay(3000)
+            .fadeOut(function() {
+                $(this).remove();
+            });
+        if(window.location.search !== '?'+pageId+"tt-content="+$('form').attr('id')){
+            window.location.href = '//' + location.host + location.pathname + "?" +pageId+ "tt-content=" + $('form').attr('id');
+        }
+        return false;
+    });
+
+    // Refresh new window with correct url
+    if($(externWindow).length !== 0 && window.location.search !== '?'+pageId+"tt-content="+$('form').attr('id')){
+        window.location.href = '//' + location.host + location.pathname + "?" +pageId+ "tt-content=" + $('form').attr('id');
+    }
+
+    // enable CodeMirror for extern window
+    $(externWindow).children("[class=qfq-codemirror]").each(
+        function () {
+            var config = {};
+            var $this = $(this);
+            var configData = $this.data('config');
+            if (configData) {
+                if (configData instanceof Object) {
+                    // jQuery takes care of decoding data-config to JavaScript object.
+                    config = configData;
+                } else {
+                    QfqNS.Log.warning("'data-config' is invalid: " + configData);
+                }
+            }
+            var cm = CodeMirror.fromTextArea(this, configData);
+            cm.on('change', (function ($form, $textArea) {
+                return function (instance, changeObj) {
+                    $textArea.val(instance.getValue());
+                    $form.change();
+                };
+            })($(this).closest('form'), $this));
+            // This added class is needed to not fire the script more than once
+            $(this).addClass("cm-done");
+            // For the extern window we use the whole place to show CodeMirror
+            $(this).next().css('height','100%');
+        }
+    );
+});
\ No newline at end of file