Added the AddWidget button to Page/Update

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

@@ -30,6 +30,7 @@
     <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" />
+    <abp-script src="/Pages/CmsKit/Contents/addWidgetModal.js" />
 </abp-script-bundle>
 }
 

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

@@ -122,7 +122,7 @@ $(function () {
                 ['code', 'codeblock'],
                 // Using Option: Customize the last button
                 [{
-                    el: createLastButton(),
+                    el: createAddWidgetButton(),
                     command: 'bold',
                     tooltip: 'Add Widget'
                 }]
@@ -171,7 +171,7 @@ $(function () {
         });
     }
 
-    function createLastButton() {
+    function createAddWidgetButton() {
         //TODO add auth
         const button = document.createElement('button');
 

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

@@ -4,6 +4,7 @@ $(function () {
 
     var $formUpdate = $('#form-page-update');
     var $buttonSubmit = $('#button-page-update');
+    var widgetModal = new abp.ModalManager({ viewUrl: abp.appPath + "CmsKit/Contents/AddWidgetModal", modalClass: "addWidgetModal" });
 
     $formUpdate.data('validator').settings.ignore = ":hidden, [contenteditable='true']:not([name]), .tui-popup-wrapper";
 
@@ -83,6 +84,19 @@ $(function () {
             minHeight: "25em",
             initialEditType: 'markdown',
             language: $editorContainer.data("language"),
+            toolbarItems: [
+                ['heading', 'bold', 'italic', 'strike'],
+                ['hr', 'quote'],
+                ['ul', 'ol', 'task', 'indent', 'outdent'],
+                ['table', 'image', 'link'],
+                ['code', 'codeblock'],
+                // Using Option: Customize the last button
+                [{
+                    el: createAddWidgetButton(),
+                    command: 'bold',
+                    tooltip: 'Add Widget'
+                }]
+            ],
             hooks: {
                 addImageBlobHook: uploadFile,
             },
@@ -126,4 +140,19 @@ $(function () {
             }
         });
     }
+
+    function createAddWidgetButton() {
+        const button = document.createElement('button');
+
+        button.className = 'toastui-editor-toolbar-icons last dropdown';
+        button.style.backgroundImage = 'none';
+        button.style.margin = '0';
+        button.innerHTML = `AW`;
+        button.addEventListener('click', (event) => {
+            event.preventDefault();
+            widgetModal.open();
+        });
+
+        return button;
+    }
 });