ASP.NET 5探险(3):使用UMEditor并实现图片上传

(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)

题记:今天将继续上一篇来讲解百度富文本Web编辑器UEditor或UMEditor的使用。

上一篇“ASP.NET 5探险”,我给大家分享了如何在ASP.NET 5中实现文件上传。我之所以研究这一问题的原因,就是要在百度的百度富文本Web编辑器UMEditor中实现图片上传。那么今天我们回过头来看看如何在ASP.NET 5的MVC 6项目中使用UMEditor(UEditor的使用应该比较类似)。

1,从UMEditor官网下载安装包,随便什么版本的UTF-8版都可以,因为就算你下载的.NET版本里面附带的后端代码也是不能直接使用的。

2,在wwwroot中建立一个文件夹来包含UMEditor的前端文件,比如我的是“umeditor”,把安装包的文件解压后放到这个文件夹中。注意不要包含后端代码的子文件夹。

3,要使用,和普通的前端框架类似,在视图文件(cshtml)中,添加css和js文件的引用。如下所示代码:

@section styles {
    <link href="~/umeditor/themes/default/css/umeditor.css" rel="stylesheet" />
}

<br />
<br />
<br />
<div id="content" class="w900 border-style1 bg">
    <script type="text/plain" id="myEditor" style="width:80%; height:160px">
    </script>
</div>

@section scripts {
    <script src="~/umeditor/umeditor.config.js"></script>
    <script src="~/umeditor/umeditor.js"></script>
    <script src="~/umeditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript">
        //实例化编辑器
        var um = UM.getEditor(‘myEditor‘);
    </script>
}

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

4,基于“上传文件”中叙述的方式,实现一个上传图片的Controller。整个上传图片的处理逻辑我是基于UMEditor给的后台代码进行修改的。我已经把我的代码分享到GitHub中,“阅读原文”可以访问。是其中的“UMEditorUploadController.cs”和“Uploader.cs”两个文件。

5,最后一步就是修改“umeditor.config.js”文件中的配置,让其正确使用上面的Controller。具体的修改地方如下:

,imageUrl: URL + "../UMEditorUpload/Image"             //图片上传提交地址
,imagePath:URL + "../"                     //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 上面的第一个配置项是指上传文件要调用的地址,即是UMEditorUploadController中的Image方法的地址。第二个配置项是修改上传文件后保存的相对目录。当然你也可以根据自身的情况调整配置。

原文地址:https://github.com/heavenwing/redmoon

时间: 2024-11-09 23:07:06

ASP.NET 5探险(3):使用UMEditor并实现图片上传的相关文章

ASP.NET图片上传,加水印文字和水印图片!

看了清清月儿的这篇文章让自己受益匪浅,但是觉得还有一些问题.上传图片后还有原来的图片文件存在,觉得这样很不爽,调用file类的delete方法删除原来没有生成水印的图片另外自己又加了一个限制图片大小的函数 1.最简单的单文件上传(没花头) 效果图:说明:这是最基本的文件上传,在asp.net1.x中没有这个FileUpload控件,只有html的上传控件,那时候要把html控件转化为服务器控件,很不好用.其实所有文件上传的美丽效果都是从这个FileUpload控件衍生,第一个例子虽然简单却是根本

【西祠日志】【07】努力努力,找资料,思考,怎么做asp图片上传

[西祠日志][07]努力努力,找资料,思考,怎么做asp图片上传  (2015.07.23周四) 今天忘了带本子,直接写在书上了笔记,晚点还是夹在本子里: 学了这么久的web应用,一直都没时间去做一点,相对复杂点得应用,比如现在要考虑的图片上传,或者是接下来要加强学习的正则表达式.防SQL注入.验证码的实现.图片水印功能等,这的确是应该作为我学习的第二个阶段,做一点相对复杂一点的应用功能,考虑怎样使自己做的网站更加健壮,今天主要是在找asp资料学习图片上传,考虑了下js实现web富文本编辑器,然

Asp.Net Mvc 使用WebUploader 多图片上传

来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是一次只能传一张.由于现在 项目用的是MVC,像Asp那样 拖控件 是不现实了.在我脑海中立刻就浮现出一个想法,网上一定有插件,哈哈.去网上一搜索,哇哦这么多.在众多的插件中我被百度的WebUploader吸引了.官网上写着:"WebUploader是由Baidu WebFE(FEX)团队开发的一个简

ASP.NET MVC应用程序把文字写在图片上

原文:ASP.NET MVC应用程序把文字写在图片上 Insus.NET实现这篇<MVC把随机产生的字符串转换为图片>http://www.cnblogs.com/insus/p/3624235.html 之后,把字符串转换为图片,不如尝试,把字符串写在一张图片之上.好像有点添加水印的意思. 如果你了解此篇,实现水印的功能也自然懂得了. 参考下面方法,是核心的功能函数,传入文本,以及图片,返回的是Bitmap: 创建控件器,编写两个Action: 接下来,创建视图: 演示: ASP.NET M

使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百度开发的插件,lite版是UM EasyUI编辑器:用easyUI的都懂,基本上肯定用到 其他的富文本编辑器就不说了,前两个小编我用的比较多 本来我是比较倾向于CKEditor,但是这个插件不支持图片上传,图片功能只能链接过去,而不能在控件本身中上传,所以就选择了UMeditor 为啥选择UM,不选

UMEditor(Ueditor mini)修改图片上传路径

UMEditor(Ueditor mini)修改图片上传路径 imageUp.ashx string pathbase = "/UpLoad/images/"; //保存文件夹在网站根目录下 dialogs/image/image.js //修改为 var $img = $("<img src='" + url + "' class='edui-image-pic' />"),//去掉editor.options.imagePath,

在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文件上传,在chrome, firefox下运行良好,但在某些版本的IE浏览器(比如IE8,IE9)下却无法正常运行,这可能是因为JSAjaxFileUploader插件在编写时没有考虑到某些低版本IE浏览器导致的.本篇,就在ASP.NET MVC4下实现单个图片上传,具体功能包括: 1.在客户端选择图片,并限

Asp.net中FileUpload控件实现图片上传并带预览显示

单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的单击事件中加载已上传图片. 2.关键代码:     页面代码: 1 <asp:FileUpload ID="FileUpload" runat="server" /> 2 <asp:Button ID="BtnUp" runat="

asp.net多图片上传同时保存对每张图片的描述

前台aspx //图片预览和描述 function previewImage(file) { var div = document.getElementById('preview'); div.innerHTML = ""; for (var i = 0; i < file.files.length; i++) { //alert(file.files[i]); var ndiv = document.createElement("div"); ndiv.st