markdown for editing blog posts

modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Edit.cshtml

@@ -1,26 +1,57 @@
 @page
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Lodash
+@using Volo.Abp.AspNetCore.Mvc.UI.Packages.TuiEditor
 @using Volo.Blogging.Pages.Blog.Posts
 @model EditModel
 @inherits Volo.Blogging.Pages.Blog.BloggingPage
 
+@section styles {
+    <abp-style-bundle @*name="@typeof(EditModel).FullName" *@>
+        <abp-style type="@typeof(TuiEditorStyleContributor)" />
+        <abp-style src="/Pages/Blog/Posts/new.css" />
+    </abp-style-bundle>
+}
 @section scripts {
     <abp-script-bundle name="@typeof(EditModel).FullName">
+        <abp-script type="@typeof(LodashScriptContributor)" />
+        <abp-script type="@typeof(TuiEditorScriptContributor)" />
         <abp-script src="/Pages/Blog/Posts/edit.js" />
     </abp-script-bundle>
 }
 
-<form method="post">
-    <abp-input asp-for="@Model.Post.Title" auto-focus="true" />
-    <abp-input asp-for="@Model.Post.Url" />
-    <abp-input asp-for="@Model.Post.Tags" />
+<div id="edit-post-container">
+    <form method="post"  id="edit-post-form">
+        <abp-input asp-for="Post.Title" auto-focus="true" />
+        <abp-input asp-for="Post.Url" />
+        <abp-input asp-for="Post.Tags" />
+        <abp-input asp-for="Post.BlogId" />
+        <abp-input asp-for="Post.Id" />
+        <abp-input asp-for="Post.Content" />
+
+        <div class="form-group">
+            <div class="edit-post-editor">
+                <div class="gradient-background-animation loading-cover"></div>
+            </div>
+        </div>
+
+        <div class="actions d-flex">
+            <div class="text-muted editor-info d-none d-lg-block mr-auto">
+
+                <div>
+                    <svg class="markdown-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
+                    </svg> <small>@L["MarkdownSupported"] </small>
+                </div>
+
+                <div><small><i class="fa fa-copy"></i> @L["FileUploadInfo"].Value</small></div>
 
-    <div class="form-group">
-        <label>@L["Content"]</label>
-        <textarea rows="4" class="form-control" name="Post.Content">@Model.Post.Content</textarea>
-    </div>
+            </div>
+            <div class="mt-3 d-flex flex-row-reverse">
+                <abp-button type="submit" form="edit-post-form" text="@L["Submit"].Value" icon="check" />
 
-    <abp-input asp-for="@Model.Post.BlogId"/>
-    <abp-input asp-for="@Model.Post.Id"/>
+                <a asp-page="./Index" class="btn btn-default mr-2"><span>@L["Cancel"]</span></a>
+            </div>
+        </div>
 
-    <abp-button type="submit" text="@L["Submit"].Value" />
-</form>
+    </form>
+</div>

modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Edit.cshtml.cs

@@ -67,6 +67,7 @@ namespace Volo.Blogging.Pages.Blog.Posts
         [StringLength(PostConsts.MaxUrlLength)]
         public string Url { get; set; }
 
+        [HiddenInput]
         [StringLength(PostConsts.MaxContentLength)]
         public string Content { get; set; }
 

modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Index.cshtml

@@ -22,7 +22,7 @@
         <abp-style src="/Pages/Blog/Posts/blogcss/owlcarousel/dist/assets/owl.theme.green.min.css" />
     </abp-style-bundle>
 }
-
+    <a asp-page="./New" asp-route-blogShortName="@Model.BlogShortName">Create New Post</a>
 <div class="container hero-container pb-5 bg-white">
 
     <div class="row">

modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/edit.js

@@ -1,4 +1,65 @@
 (function ($) {
+
+    var $container = $("#edit-post-container");
+    var $editorContainer = $container.find(".edit-post-editor");
+    var $submitButton = $container.find("button[type=submit]");
+    var $form = $container.find("form#edit-post-form");
+    var editorDataKey = "tuiEditor";
+
+    var uploadImage = function (file, callbackFn) {
+        var formData = new FormData();
+        formData.append('file', file);
+
+        $.ajax({
+            type: "POST",
+            url: "",
+            data: formData,
+            contentType: false,
+            processData: false,
+            success: function (response) {
+                callbackFn(response.fileUrl);
+            }
+        });
+    };
+
+    console.log($form.find("input[name='Post.Content']").val() + "asda");
+    var newPostEditor = $editorContainer.tuiEditor({
+        usageStatistics: false,
+        initialEditType: 'markdown',
+        previewStyle: 'tab',
+        height: "auto",
+        initialValue: $form.find("input[name='Post.Content']").val(),
+        hooks: {
+            addImageBlobHook: function (blob, callback, source) {
+                var imageAltText = blob.name;
+
+                uploadImage(blob,
+                    function (fileUrl) {
+                        callback(fileUrl, imageAltText);
+                    });
+            }
+        },
+        events: {
+            load: function () {
+                $editorContainer.find(".loading-cover").remove();
+                $submitButton.prop("disabled", false);
+            }
+        }
+    }).data(editorDataKey);
+
+
+
+    $container.find("form#edit-post-form").submit(function (e) {
+        var $postTextInput = $form.find("input[name='Post.Content']");
+
+        var postText = newPostEditor.getMarkdown();
+        $postTextInput.val(postText);
+        console.log(postText);
+
+        $submitButton.buttonBusy();
+        $(this).off('submit').submit();
+    });
+
     $('#Post_Title').on("change paste keyup", function() {
         var title = $('#Post_Title').val();
 

modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/new.js

@@ -4,6 +4,7 @@
     var $container = $("#qa-new-post-container");
     var $editorContainer = $container.find(".new-post-editor");
     var $submitButton = $container.find("button[type=submit]");
+    var $form = $container.find("form#new-post-form");
     var editorDataKey = "tuiEditor";
 
     var uploadImage = function (file, callbackFn) {
@@ -48,12 +49,10 @@
 
 
     $container.find("form#new-post-form").submit(function (e) {
-        var $form = $container.find("form#new-post-form");
         var $postTextInput = $form.find("input[name='Post.Content']");
 
         var postText = newPostEditor.getMarkdown();
         $postTextInput.val(postText);
-        console.log(postText);
 
         $submitButton.buttonBusy();
         $(this).off('submit').submit();