.NET 6.0使用KindEditor

最新推荐文章于 2024-11-15 16:55:06 发布

qq_50310664

最新推荐文章于 2024-11-15 16:55:06 发布

阅读量128

点赞数

文章标签：编辑器 .net

本文链接：https://blog.csdn.net/qq_50310664/article/details/130141787

版权

本文介绍了如何在项目中集成KindEditor编辑器，包括将文件夹复制到wwwroot目录，设置Razor视图中的脚本以显示编辑器，以及配置图片上传功能，调用Home控制器的PicUpload方法处理上传请求。同时，文章还提到了如何自定义编辑器上传图片的形参名称以及保存上传图片至wwwroot/images目录。

摘要由CSDN通过智能技术生成

KindEditor下载链接

1、下载好插件后，把kindeditor文件夹复制到项目wwwroot目录中

2、在想要展示编辑器的Razor视图中编写以下代码：

<script src="~/kindeditor/kindeditor-all.js"></script>  @*编辑器核心包*@
<script src="~/kindeditor/lang/zh-cn.js"></script>   @*中文包*@
<script>
    KindEditor.ready(function (K) {
        K.create('#description', {
            uploadJson: '@Url.Action("PicUpload", "Home")',   @*编辑器图片上传的控制器和动作方法*@
            allowFileManager: true
        });
    });
</script>
<div>
        <textarea id="description" name="description" style="width:750px;height:300px;">
            </textarea>
    </div>

3、在Home控制器中写入以下代码：（方法中默认接收编辑器图片对象的形参名称为：imgFile，想要自定义形参名称在第4步）

public class Message
    {
        public string Url { get; set; }
        public int Error { get; set; }
    }

/// <summary>
/// 编辑器图片上传的方法
/// </summary>
/// <param name="description">接收编辑器上传的图片信息对象（形参默认名称为 imgFile ）</param>
/// <returns>返回成功上传的json</returns>
public IActionResult PicUpload(IFormFile? description)
        {
            string savePath = "/images/";
            Message message = null;
            if (description != null)
            {
                string fileName = "";
                fileName = description!.FileName;
                string extension = Path.GetExtension(fileName);
                string newName = Guid.NewGuid().ToString();
                fileName = $"{newName}{extension}";
                message = new Message() { Error = 0, Url = savePath + fileName };
                savePath = Directory.GetCurrentDirectory() + "/wwwroot" + savePath + fileName;
                using (FileStream file = new FileStream(savePath, FileMode.Create))
                {
                    description.CopyTo(file);
                    file.Flush();
                }
            }
            return Json(message);
        }

4、自定义接收编辑器图片对象的形参名称：（不想自定义可以使用默认形参名：imgFile）

1）打开第一步kindeditor文件夹，找到kindeditor-all.js文件，双击打开此文件；

2）使用快捷键ctrl + h 替换此文件中所有的imgFile为description，也可以为自定义的任何名称。

5、在项目wwwroot目录中新建文件夹images，用来保存上传的图片。