Merge pull request #11937 from abpframework/cms-kit/code-mirror-for-page

Cms Kit - code mirror for page script & style

modules/cms-kit/host/Volo.CmsKit.Web.Unified/abp.resourcemapping.js

@@ -7,6 +7,5 @@ module.exports = {
         "@libs"
     ],
     mappings: {
-
     }
 }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Create.cshtml

@@ -1,6 +1,7 @@
 @page
 
 @using System.Globalization
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Codemirror
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.TuiEditor
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.Uppy
 @using Volo.CmsKit.Admin.Web.Pages
@@ -22,6 +23,9 @@
     <abp-script type="typeof(TuiEditorScriptContributor)" />
     <abp-script type="typeof(UppyScriptContributor)" />
     <abp-script type="typeof(SlugifyScriptContributor)" />
+    <abp-script type="typeof(CodemirrorScriptContributor)"/>
+    <abp-script src="/libs/codemirror/mode/css/css.js"/>
+    <abp-script src="/libs/codemirror/mode/javascript/javascript.js"/>
     <abp-script src="/client-proxies/cms-kit-common-proxy.js"/>
     <abp-script src="/client-proxies/cms-kit-admin-proxy.js"/>
     <abp-script src="/Pages/CmsKit/Pages/create.js" />
@@ -31,6 +35,7 @@
 @section styles {
 <abp-style-bundle>
     <abp-style type="typeof(TuiEditorStyleContributor)" />
+    <abp-style type="typeof(CodemirrorStyleContributor)" />
     <abp-style src="/Pages/CmsKit/Pages/create.css"/>
 </abp-style-bundle>
 }
@@ -56,11 +61,11 @@
                 </abp-tab>
 
                 <abp-tab title="@L["Script"]">
-                    <abp-input asp-for="ViewModel.Script" suppress-label="true" class="cms-kit-editor" />
+                    <abp-input asp-for="ViewModel.Script" suppress-label="true" />
                 </abp-tab>
 
                 <abp-tab title="@L["Style"]">
-                    <abp-input asp-for="ViewModel.Style"  suppress-label="true" class="cms-kit-editor"/>
+                    <abp-input asp-for="ViewModel.Style"  suppress-label="true"/>
                 </abp-tab>
 
             </abp-tabs>

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Update.cshtml

@@ -1,6 +1,7 @@
 @page "{Id}"
 
 @using System.Globalization
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Codemirror
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.TuiEditor
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.Uppy
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.Slugify
@@ -23,6 +24,9 @@
     <abp-script type="typeof(TuiEditorScriptContributor)" />
     <abp-script type="typeof(UppyScriptContributor)" />
     <abp-script type="typeof(SlugifyScriptContributor)" />
+    <abp-script type="typeof(CodemirrorScriptContributor)"/>
+    <abp-script src="/libs/codemirror/mode/css/css.js"/>
+    <abp-script src="/libs/codemirror/mode/javascript/javascript.js"/>
     <abp-script src="/client-proxies/cms-kit-common-proxy.js"/>
     <abp-script src="/client-proxies/cms-kit-admin-proxy.js"/>
     <abp-script src="/Pages/CmsKit/Pages/update.js" />
@@ -32,6 +36,7 @@
 @section styles {
 <abp-style-bundle>
     <abp-style type="typeof(TuiEditorStyleContributor)" />
+    <abp-style type="typeof(CodemirrorStyleContributor)" />
     <abp-style src="/Pages/CmsKit/Pages/update.css" />
 </abp-style-bundle>
 }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js

@@ -6,22 +6,40 @@ $(function () {
     var $slug = $('#ViewModel_Slug');
     var $buttonSubmit = $('#button-page-create');
 
+    var scriptEditor = CodeMirror.fromTextArea(document.getElementById("ViewModel_Script"), {
+        mode: "javascript",
+        lineNumbers: true
+    });
+
+    var styleEditor = CodeMirror.fromTextArea(document.getElementById("ViewModel_Style"), {
+        mode: "css",
+        lineNumbers: true
+    });
+
+    $('.nav-tabs a').on('shown.bs.tab', function () {
+        scriptEditor.refresh();
+        styleEditor.refresh();
+    });
+
     $createForm.data('validator').settings.ignore = ":hidden, [contenteditable='true']:not([name]), .tui-popup-wrapper";
 
     $createForm.on('submit', function (e) {
         e.preventDefault();
-
+        
         if ($createForm.valid()) {
 
             abp.ui.setBusy();
 
+            $("#ViewModel_Style").val(styleEditor.getValue());
+            $("#ViewModel_Script").val(scriptEditor.getValue());
+
             $createForm.ajaxSubmit({
                 success: function (result) {
                     abp.notify.success(l('SuccessfullySaved'));
                     abp.ui.clearBusy();
                     location.href = "../Pages";
                 },
-                error: function(result){
+                error: function (result) {
                     abp.ui.clearBusy();
                     abp.notify.error(result.responseJSON.error.message);
                 }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js

@@ -7,6 +7,21 @@ $(function () {
 
     $formUpdate.data('validator').settings.ignore = ":hidden, [contenteditable='true']:not([name]), .tui-popup-wrapper";
 
+    var scriptEditor = CodeMirror.fromTextArea(document.getElementById("ViewModel_Script"), {
+        mode: "javascript",
+        lineNumbers: true
+    });
+
+    var styleEditor = CodeMirror.fromTextArea(document.getElementById("ViewModel_Style"), {
+        mode: "css",
+        lineNumbers: true
+    });
+
+    $('.nav-tabs a').on('shown.bs.tab', function () {
+        scriptEditor.refresh();
+        styleEditor.refresh();
+    });
+
     $formUpdate.on('submit', function (e) {
         e.preventDefault();
 
@@ -14,6 +29,9 @@ $(function () {
 
             abp.ui.setBusy();
 
+            $("#ViewModel_Style").val(styleEditor.getValue());
+            $("#ViewModel_Script").val(scriptEditor.getValue());
+
             $formUpdate.ajaxSubmit({
                 success: function (result) {
                     abp.notify.success(l('SuccessfullySaved'));