C#WebApi kindEditor富文本编辑器的使用

最新推荐文章于 2025-06-02 12:03:18 发布

云卷云舒~

最新推荐文章于 2025-06-02 12:03:18 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： c#

本文链接：https://blog.csdn.net/weixin_45253985/article/details/105328588

本文介绍了如何在C# WebApi项目中使用KindEditor富文本编辑器，包括转换DEMO以适应WebApi框架，强调了图片上传和获取文本值的注意事项，并对比了KindEditor与layui富文本编辑器的优缺点，提供了适用场景的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言
二、如何使用
三、相关代码（支持C# WebApi）
四、和layui富文本编辑器组件区别
五、使用场景（建议）

一、前言
这个编辑器是我挑了很久才最终选定的，里面没有支持WebApi的案例。所以我把下载后自带的案例转换为了C# WebApi。里面还可以支持JAVA、php等语言。有兴趣的小伙伴可以了解一下哦

二、如何使用
1、点我进入哦😆
2、一些比较重要的方法（从官网上摘抄下来的）：
①items：UI层设置该文本编辑器要显示的相关功能
②
三、相关代码（支持C# WebApi）
1、小序：kindeditor富文本编辑器是支持C#、JAVA、PHP等语言的，里面也有相关的demo可以提供参考非常方便的。但是，里面的demo运用到的框架可能和你实际用到的框架是不一样的。所以，当你想要使用和demo里面不一样的框架的时候你就要自己将原本demo里面的框架“翻译”成你需要的。我这里是将C# demo里面的框架转换为asp.net webapi了。
2、要注意的地方：
①图片上传功能：
当你使用的是webapi框架的时候要进行上传图片功能，那里面的相关代码可能会稍微不一样。因为，该框架有自己的上传规范。这里稍微会有点不一样
②得到富文本框里面的值：
该富文本是通过一个方法返回一个变量，我们通过该变量进行取值的。一般可以取文本值和相关的DOM元素。一般我们平常需求的一些要得到的一些类型的数据，这个变量都可以满足。
在这里插入图片描述
[1-0] 部分代码展示
③使用不同的语言有不同的demo，具体看自己实际业务需求。有些时候如果该demo的框架不适用自身实际需求的话，就要进行转换。
④该编辑器有几种模式，有简单版和复杂版的。不同的选择有不同的部署方式，不过大部分是一样的不用太担心。
3、是用webapi框架进行上传图片

 /// <summary>        
        /// 文件上传        
        /// /// </summary>       
        /// /// <param name="guid">GUID由前端生成</param> 
        /// /// <returns></returns>
        [HttpPost]
        [Route("api/Upload")]
        public async Task<HttpResponseMessage> PostData()
        {
   
   
            string guid = null;//随机生成的图片名（不重复）
            //string uploadFolderPath = null;
            if (!Request.Content.IsMimeMultipartContent())
            {
   
   
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }

            uploadFolderPath = HostingEnvironment.MapPath("~/kindeditor/asp.net/attached/image/"+ HttpContext.Current.Session["UNumber"]);//指定要将文件存入的服务器物理位置

            if (!Directory.Exists(uploadFolderPath))
                Directory.CreateDirectory(uploadFolderPath);

            List<string> files = new List<string>();

            guid = RNameImages();

            var provider = new RMultipartFormDataStreamProvider(uploadFolderPath, guid);

            string RelativeUrl = null;

            try
            {
   
   
                // 读取表单数据==>将图片读到文件流里面              
                await Request.Content.ReadAsMultipartAsync(provider);//执行完这条之后，文件便保存了

                //这说明了如何获取文件名。                   
                foreach (var file in