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