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

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

一、前言
二、如何使用
三、相关代码(支持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);//执行完这条之后,文件便保存了

                //这说明了如何获取文件名。                  
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,我们需要在 Spring Boot 项目中引入 kindeditor 的相关依赖。可以通过在 Maven 或 Gradle 配置文件中添加以下依赖来实现: Maven: ```xml <dependency> <groupId>com.github.kindeditor</groupId> <artifactId>kindeditor</artifactId> <version>4.1.11</version> </dependency> ``` Gradle: ```groovy compile group: 'com.github.kindeditor', name: 'kindeditor', version: '4.1.11' ``` 接着,在 Spring Boot 项目中添加一个控制器,用于处理 kindeditor 的上传请求和获取文件列表请求。示例代码如下: ```java @RestController @RequestMapping("/kindeditor") public class KindEditorController { @Autowired private Environment env; /** * KindEditor上传文件接口 * @param file * @param request * @return */ @PostMapping("/upload") public Map<String, Object> upload(@RequestParam("imgFile") MultipartFile file, HttpServletRequest request) { Map<String, Object> result = new HashMap<>(); String url = ""; try { // 获取上传文件目录 String uploadDir = env.getProperty("kindeditor.upload-dir"); if (StringUtils.isBlank(uploadDir)) { uploadDir = request.getServletContext().getRealPath("/upload"); } File dir = new File(uploadDir); if (!dir.exists()) { dir.mkdirs(); } // 获取上传文件名 String fileName = file.getOriginalFilename(); // 生成新的文件名 String newFileName = UUID.randomUUID().toString() + "." + StringUtils.substringAfterLast(fileName, "."); // 保存文件 File dest = new File(dir, newFileName); file.transferTo(dest); // 返回文件访问URL url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/upload/" + newFileName; result.put("error", 0); result.put("url", url); } catch (Exception e) { result.put("error", 1); result.put("message", "文件上传失败"); } return result; } /** * KindEditor获取文件列表接口 * @param request * @return */ @GetMapping("/filemanager") public Map<String, Object> fileManager(HttpServletRequest request) { Map<String, Object> result = new HashMap<>(); try { // 获取上传文件目录 String uploadDir = env.getProperty("kindeditor.upload-dir"); if (StringUtils.isBlank(uploadDir)) { uploadDir = request.getServletContext().getRealPath("/upload"); } File dir = new File(uploadDir); if (!dir.exists()) { dir.mkdirs(); } // 遍历目录,获取文件列表 List<Map<String, Object>> fileList = new ArrayList<>(); File[] files = dir.listFiles(); if (files != null && files.length > 0) { for (File file : files) { Map<String, Object> fileInfo = new HashMap<>(); fileInfo.put("is_dir", file.isDirectory()); fileInfo.put("has_file", file.isFile()); fileInfo.put("filesize", file.length()); fileInfo.put("filename", file.getName()); fileInfo.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date(file.lastModified()))); fileList.add(fileInfo); } } result.put("error", 0); result.put("file_list", fileList); } catch (Exception e) { result.put("error", 1); result.put("message", "文件列表获取失败"); } return result; } } ``` 其中,`upload` 方法用于处理 kindeditor 的上传请求,`filemanager` 方法用于获取文件列表请求。在 `upload` 方法中,我们通过 `MultipartFile` 接口获取上传的文件信息,然后将文件保存至指定目录,并返回文件访问 URL。在 `filemanager` 方法中,我们遍历指定目录下的所有文件,并将文件信息封装成列表返回。 最后,在前端页面中引入 kindeditor 的相关资源文件,并在页面中添加文本编辑器元素。示例代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>KindEditor富文本编辑器</title> <link rel="stylesheet" href="http://cdn.staticfile.org/kindeditor/4.1.11/themes/default/default.css" /> <script src="http://cdn.staticfile.org/kindeditor/4.1.11/kindeditor.js"></script> <script src="http://cdn.staticfile.org/kindeditor/4.1.11/lang/zh-CN.js"></script> </head> <body> <textarea id="editor"></textarea> <script> KindEditor.ready(function(K) { K.create('#editor', { uploadJson: '/kindeditor/upload', fileManagerJson: '/kindeditor/filemanager' }); }); </script> </body> </html> ``` 在以上代码中,我们引入了 kindeditor 的相关资源文件,并在页面中添加了一个 ID 为 `editor` 的 textarea 元素,然后通过 JavaScript 代码初始化了 kindeditor,并设置了上传文件和获取文件列表的 URL。 至此,我们就可以在 Spring Boot 项目中轻松实现 kindeditor富文本编辑器功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值