Added tui-editor with media upload to index page

modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml

@@ -1,7 +1,10 @@
 @page
 @using Localization.Resources.AbpUi
 @using Microsoft.Extensions.Localization
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.TuiEditor
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Uppy
 @using Volo.Abp.GlobalFeatures
+@using Volo.Abp.Users
 @using Volo.CmsKit.GlobalFeatures
 @using Volo.CmsKit.Pages
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Commenting
@@ -11,6 +14,18 @@
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags
 @model IndexModel
 @inject IStringLocalizer<AbpUiResource> Localizer
+@inject ICurrentUser CurrentUser
+
+@section styles{
+    <abp-style type="typeof(TuiEditorStyleContributor)"/>
+}
+
+@section scripts{
+    <abp-script type="typeof(UppyScriptContributor)"/>
+    <abp-script type="typeof(TuiEditorScriptContributor)"/>
+    <abp-script src="/Pages/index.js"/>
+}
+
 <h1 class="text-center">CMS Kit DEMO</h1>
 
 <abp-card>
@@ -33,6 +48,26 @@
     </abp-card-body>
 </abp-card>
 
+<hr />
+<h3>Media added content editor</h3>
+<abp-card>
+    <abp-card-body>
+        @if (CurrentUser.Id != null)
+        {
+            @if (GlobalFeatureManager.Instance.IsEnabled<MediaFeature>())
+            {
+                
+                <div id="content-editor"></div>
+
+            }
+        }
+        else
+        {
+            <span>Please Login</span>
+        }
+    </abp-card-body>
+</abp-card>
+
 <abp-row>
     <abp-column size-md="_6">
         @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())

modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/index.js

@@ -0,0 +1,58 @@
+$(function(){
+    var fileUploadUri = "/api/cms-kit-admin/media";
+    var fileUriPrefix = "/api/cms-kit/media/"
+    
+    var editor = $('#content-editor');
+
+    function getUppyHeaders() {
+        var headers = {};
+        headers[abp.security.antiForgery.tokenHeaderName] = abp.security.antiForgery.getToken();
+
+        return headers;
+    }
+    
+    var uploadImage = function (blob, callback, source) {
+        var UPPY_OPTIONS = {
+            endpoint: fileUploadUri,
+            formData: true,
+            fieldName: "file",
+            method: "post",
+            headers: getUppyHeaders()
+        };
+
+        var UPPY = Uppy.Core().use(Uppy.XHRUpload, UPPY_OPTIONS);
+
+        UPPY.reset();
+
+        UPPY.addFile({
+            id: "content-file",
+            name: blob.name, 
+            type: blob.type, 
+            data: blob, 
+        });
+        
+        UPPY.upload().then((result) => {
+            if (result.failed.length > 0) {
+                abp.message.error("File upload failed");
+            } else {
+                var mediaDto = result.successful[0].response.body;
+                var fileUrl = (fileUriPrefix + mediaDto.id);
+                
+                callback(fileUrl, mediaDto.name);
+            }
+        });
+    };
+   
+   editor.tuiEditor({
+        usageStatistics: false,
+        useCommandShortcut: true,
+        initialEditType: 'wysiwyg',
+        previewStyle: 'tab',
+        height: "25em",
+        minHeight: "25em",
+        language: abp.localization.currentCulture.cultureName, 
+        hooks: {
+            addImageBlobHook: uploadImage,
+       },
+   });
+});