ITIronMan2019:MarkDownEditor | C# Online Compiler

ITIronMan2019:MarkDownEditor by IT WeiHan

using System;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace HelloWorldMvcApp
{
	public class Post
	{
        [Display(Name ="標題")]
        public string Title { get; set; }

        [AllowHtml()]
        public string Content { get; set; }

        [AllowHtml()]
        public string MarkDownContent { get; set; }
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
​
namespace HelloWorldMvcApp
{
    public class Post
    {
        [Display(Name ="標題")]
        public string Title { get; set; }
​
        [AllowHtml()]
        public string Content { get; set; }
​
        [AllowHtml()]
        public string MarkDownContent { get; set; }
    }
}

@model HelloWorldMvcApp.Post
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>MarkDown Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
</head>
<body>

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        @Html.LabelFor(m => m.Title);
        @Html.EditorFor(m => m.Title);
        @Html.TextAreaFor(m => m.MarkDownContent, new { id = "markdwonTextArea" });

        <input type="submit" value="Save" title="Save the post" /><br /><br /><br />

        @Html.TextAreaFor(m => m.Content, new { id = "markdwonTextAreaHiddenText", style = "width:1000px; height: 200px" })

    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.6/showdown.min.js"></script>
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <script>
        //簡單MarkDownEditor
        var converter = new showdown.Converter({ simpleLineBreaks: true, tables: true });
        var hiddenMarkDownTextArea = document.getElementById("markdwonTextAreaHiddenText");
        function reloadMarkDownData() {
            var markdown = simplemde.value();
            var html = converter.makeHtml(markdown);
            hiddenMarkDownTextArea.innerHTML = html;
        }
        var simplemde = new SimpleMDE({
            element: document.getElementById("markdwonTextArea"),
            status: ["autosave", "lines", "words", "cursor", {
                className: "CodeMirror-code",
                onUpdate: function (el) {
                    reloadMarkDownData();
                }
            }]
        });
    </script>
</body>
</html>

View

 
@model HelloWorldMvcApp.Post
@{
    Layout = null;
}
​
<!DOCTYPE html>
<html>
<head>
    <title>MarkDown Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
</head>
<body>
​
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        @Html.LabelFor(m => m.Title);
        @Html.EditorFor(m => m.Title);
        @Html.TextAreaFor(m => m.MarkDownContent, new { id = "markdwonTextArea" });
​
        <input type="submit" value="Save" title="Save the post" /><br /><br /><br />
​
        @Html.TextAreaFor(m => m.Content, new { id = "markdwonTextAreaHiddenText", style = "width:1000px; height: 200px" })
​
    }
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.6/showdown.min.js"></script>
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <script>
        //簡單MarkDownEditor
        var converter = new showdown.Converter({ simpleLineBreaks: true, tables: true });
        var hiddenMarkDownTextArea = document.getElementById("markdwonTextAreaHiddenText");
        function reloadMarkDownData() {
            var markdown = simplemde.value();
            var html = converter.makeHtml(markdown);
            hiddenMarkDownTextArea.innerHTML = html;
        }
        var simplemde = new SimpleMDE({
            element: document.getElementById("markdwonTextArea"),
            status: ["autosave", "lines", "words", "cursor", {
                className: "CodeMirror-code",
                onUpdate: function (el) {
                    reloadMarkDownData();
                }
            }]
        });
    </script>
</body>
</html>
​
    
    

using System;
using System.Web.Mvc;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        private static Post TestData = new Post()
        {
            Title = "MarkDown測試"
        };

        // GET: Home
        [HttpGet]
        public ActionResult Index()
        {
            return View(TestData);
        }

        [HttpPost]
        public ActionResult Index(Post post)
        {
            TestData = post;
            return View(post);
        }
    }
}

Controller

 
using System;
using System.Web.Mvc;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        private static Post TestData = new Post()
        {
            Title = "MarkDown測試"
        };
​
        // GET: Home
        [HttpGet]
        public ActionResult Index()
        {
            return View(TestData);
        }
​
        [HttpPost]
        public ActionResult Index(Post post)
        {
            TestData = post;
            return View(post);
        }
    }
}

View in Full Screen

要領多少錢

Last Run:	4:54:01 pm
Compile:	0.11s
Execute:	0.016s
Memory:	32kb
CPU:	0.016s

View IL Code