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

dotnetcore ueditor的更多相关文章

  1. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  2. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  3. 关于百度编辑器UEditor的一点说明

    大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径          2.首先要把这个路径配置好了.才能正常的显示, ...

  4. UEditor编辑器使用示例

    1. UEditor下载 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 下载链接:http ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

    系列目录 目录: 前言 开发环境 知识点 初始使用 自定义工具栏 设置和读取编辑器内容 文件上传 ueditor加水印 ---------------------------------------- ...

  6. 创建或打开解决方案时提示"DotNetCore.1.0.1-SDK.1.0.0.Preview2-003131-x86"错误的解决方案

    提示"DotNetCore.1.0.1-SDK.1.0.0.Preview2-003131-x86"错误的解决方案: 1.检查是否有C:\Program Files (x86)\d ...

  7. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  8. UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案

    问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElemen ...

  9. 百度编辑器UEditor与UEditor 公式插件完整Demo

    1.下载UEditor(我的是.net项目) 2.下载UEditor公式插件 3.新建解决方案和项目 4.在浏览器中预览index.html页面 结果: 5.index.html源码 <!DOC ...

随机推荐

  1. Jenkins自定义主题

    x下载自定义样式 http://afonsof.com/jenkins-material-theme/ 打开连接 最后点击:DOWNLOAD TOUR THEME! 得到样式文件:jenkins-ma ...

  2. 【Java基础】【14正则表达式&常用工具类】

    14.01_常见对象(正则表达式的概述和简单使用) A:正则表达式 是指一个用来描述或者匹配一系列符合某个语法规则的字符串的单个字符串.其实就是一种规则.有自己特殊的应用. 作用:比如注册邮箱,邮箱有 ...

  3. [五]类加载机制双亲委派机制 底层代码实现原理 源码分析 java类加载双亲委派机制是如何实现的

      Launcher启动类 本文是双亲委派机制的源码分析部分,类加载机制中的双亲委派模型对于jvm的稳定运行是非常重要的 不过源码其实比较简单,接下来简单介绍一下   我们先从启动类说起 有一个Lau ...

  4. Spring Boot(九)Swagger2自动生成接口文档和Mock模拟数据

    一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...

  5. Python2 编码问题分析

    本文浅显易懂,绿色纯天然,手工制作,请放心阅读. 编码问题是一个很大很杂的话题,要向彻底的讲明白可以写一本书了.导致乱码的原因很多,系统平台.编程语言.多国语言.软件程序支持.用户选择等都可能导致无法 ...

  6. Linux常用命令详解(week1_day1_3)--技术流ken

    本节内容 pidofpstopipuptimewgetcurltrddtargrepfind 命令详解 1.pidof 获取正在运行程序的PID 实例1: [root@ken ~]# pidof ss ...

  7. 【.NET Core项目实战-统一认证平台】第九章 授权篇-使用Dapper持久化IdentityServer4

    [.NET Core项目实战-统一认证平台]开篇及目录索引 上篇文章介绍了IdentityServer4的源码分析的内容,让我们知道了IdentityServer4的一些运行原理,这篇将介绍如何使用d ...

  8. licecap软件——简单做出app的效果gif图

    最近想在博客或者是git上放gif效果图,找了许久,终于是找到了这款软件,不到500Kb大小,使用简单 软件名为licecap,直接百度上搜索即可 使用的话,打开软件,就会出现一个窗口 之后,可以改变 ...

  9. spring boot 页面根路径获取和jsp获取的不同之处(粘贴即用)

    不同之处已做高亮. jsp 写法: <script type="text/javascript" src="${pageContext.request.contex ...

  10. Spring笔记03_AOP

    目录 1. AOP 1.1 AOP介绍 1.1.1 什么是AOP 1.1.2 AOP实现原理 1.1.3 AOP术语[掌握] 1.2 AOP的底层实现(了解) 1.2.1 JDK动态代理 1.2.2 ...