dotnetcore ueditor

dotnetcore ueditor

 https://github.com/durow/ueditornetcore

http://www.cnblogs.com/durow/p/6116393.html

1、在 http://ueditor.baidu.com/website/download.html 下载ueditor 压缩包；

2、解压后， 把net目录（.net服务器端源码）和index.html删除后，把其余内容copy至aspnetcore项目的/wwwroot/lib/ueditor 目录下；
3、在/wwwroot目录下建upload/image目录（也可不建，程序应该可以自动建）；
4、安装UEditorNetCore

Install-Package UEditorNetCore
5、在Startup.cs的ConfigureServices方法中添加UEditorNetCore服务

public void ConfigureServices(IServiceCollection services)
{　　
//第一个参数为配置文件路径，默认为项目目录下config.json　　
 //第二个参数为是否缓存配置文件，默认false　　
services.AddUEditorService()　　
services.AddMvc();
}
6、在controller 目录中添加用于处理来自UEditor请求的Controller

[Route("api/[controller]")] //配置路由
public class UEditorController : Controller
{
private UEditorService ue;
public UEditorController(UEditorService ue)
{
this.ue = ue;
}
public void Do()
{
ue.DoAction(HttpContext);
}
}
7、修改前端配置文件ueditor.config.js

serverUrl需要参照第3步Controller中配置的路由，按照上面步骤3中的配置，需要以下配置：

serverUrl:"/api/UEditor"

这样配置后当前端要获取服务端UEditor配置时就会访问/api/UEditor?action=config。

 
8、从其他项目(如yuexxin,jShop)中copy config.json到项目根目录下；

修改服务端配置config.json

上传类的操作需要配置相应的PathFormat和Prefix。示例部署在web根目录，因此Prefix都设置为"/"。使用时要根据具体情况配置。 例如示例中图片上传的配置如下：

"imageUrlPrefix": "/", /* 图片访问路径前缀 */
 "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

 
关于PathFormat的详细配置可参照官方文档。

9、在需要应用ueditor编辑器的view(或_layout.cshtml)中添加javascript引用

<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
 

  10、

扩展action

UEditor前端和后端交互主要通过在url中给出不同的action参数实现的，例如/api/UEditor?action=config会从服务端获取UEditor配置信息。UEditorNetCore目前支持的有8种action：

config 获取服务端配置信息
uploadimage 上传图片
uploadscrawl 上传涂鸦
uploadvideo 上传视频
uploadfile 上传文件
listimage 多图片上传
listfile 多文件上传
catchimage 抓取图片

如果以上action无法满足需求，可以方便的增加、覆盖、移除action。

增加action

public void ConfigureServices(IServiceCollection services)
{
services.AddUEditorService() .Add("test", context => { context.Response.WriteAsync("from test action"); }) .Add("test2", context => { context.Response.WriteAsync("from test2 action"); }); services.AddMvc();}

以上代码增加了名字为test和test2两个action，作为示例仅仅返回了字符串。当访问/api/UEditor?action=test时会返回"from test action"。在扩展action时可以使用Config获取服务端配置，也可以使用已有的Handlers，具体可以参考源代码。

覆盖现有action

上面的Add方法除了添加新action外还可以覆盖现有action。当现有的action可能不符合你的要求，可以Add一个同名的action覆盖现有的。

移除action

如果要移除某个action，可以使用Remove方法。

public void ConfigureServices(IServiceCollection services)
{
services.AddUEditorService() .Remove("uploadvideo"); services.AddMvc();
}

以上代码中的Remove("uploadvideo")方法移除了名为uploadvideo的action。

0x04 相关资源

UEditorNetCore代码和示例：https://github.com/durow/UEditorNetCore
UEditor代码：https://github.com/fex-team/ueditor  
UEditor官网：http://ueditor.baidu.com/website/index.html