使用 RichTextEditor 在 Asp .Net Core 中阅读和更新 txt.file

Question

我想在我的 asp .net Core MVC Web 应用程序中读取静态 txt 文件，编辑并再次将其另存为 txt 文件。

我想知道我是否可以通过使用一种可用的富文本编辑器（例如 TinyMCE、CKEditor 或 Quill）来实现这一点。

下面是我目前的代码。

控制器

 public IActionResult Index()
        {
           
            return View(new Script());
        }

        [HttpPost]
        public ActionResult Index(Script script)
        {
            return View(script);
        }
 private void btnRead_Click(object sender, EventArgs e)
        {
            if (File.Exists(fileLoc))
            {
                using (TextReader tr = new StreamReader(fileLoc))
                {
                    MessageBox.Show(tr.ReadLine());
                }
            }
        }

Class

 public class Script
    {
        public int id { get; set; }
   
        [AllowHtml]
        public string code { get; set; }
    }

查看

@model Models.Script

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<body>

    @using (Html.BeginForm("Index", "Scripts", FormMethod.Post))
    {
            @Html.LabelFor(m => m.code)<br/>
            @Html.TextAreaFor(m => m.code)
            @Html.ValidationMessageFor(m=>m.code,"",new { @class = "error" })
            <br/><br/>
            <input type="submit" value="Submit" />
            <span>@Html.Raw(Model.code)</span>
    }
</body>

@section Scripts{
    <script src="https://cdn.tiny.cloud/1/7wyujejhpvi3ixga3ss1q5gqwvocaiozzy83w2gvwcd004s4/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        tinymce.init({
            selector: 'textarea',
            plugins: 'a11ychecker advcode casechange formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker',
            toolbar: 'a11ycheck addcomment showcomments casechange checklist code formatpainter pageembed permanentpen table',
            toolbar_mode: 'floating',
            tinycomments_mode: 'embedded',
            tinycomments_author: 'Author name',
        });
    </script>
}

Answer 1

这里有一个关于如何读取和上传txt文件的演示：

首先，在您的本地计算机上创建一个 txt 文件。

查看：

@model Models.Script

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<body>
    <input type="file" value="import"/>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
            @Html.LabelFor(m => m.code)<br/>
            @Html.TextAreaFor(m => m.code)
            @Html.ValidationMessageFor(m=>m.code,"",new { @class = "error" })
            <br/><br/>
            <input type="submit" value="Submit" />
            <span>@Html.Raw(Model.code)</span>
    }
</body>

@section Scripts{
    <script src="https://cdn.tiny.cloud/1/7wyujejhpvi3ixga3ss1q5gqwvocaiozzy83w2gvwcd004s4/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        tinymce.init({
            selector: 'textarea',
            plugins: 'a11ychecker advcode casechange formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker',
            toolbar: 'a11ycheck addcomment showcomments casechange checklist code formatpainter pageembed permanentpen table',
            toolbar_mode: 'floating',
            tinycomments_mode: 'embedded',
            tinycomments_author: 'Author name',
        });
        $("input").change(function () {
            var fr = new FileReader();
            fr.onload = function () {
                tinyMCE.activeEditor.setContent(fr.result);
            }
            fr.readAsText(this.files[0]); 
        });         
    </script>
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new Script()
        {
            id = 1,
            code = "<h1>hello</h1>"
        };
        return View(model);
    }
    [HttpPost]
    public ActionResult Index(Script script)
    {
        StreamWriter sw = new StreamWriter("C:\xxx\Sample.txt");  
        //Write a line of text
        sw.WriteLine(script.code);
        //Close the file
        sw.Close();
        return View(script);
    }
}

结果：

使用 RichTextEditor 在 Asp .Net Core 中阅读和更新 txt.file

Read and Uptade txt.file in Asp .Net Core using RichTextEditor

html

asp.net

asp.net-mvc

rich-text-editor

asp.net-core