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
ASP.NET 5探险(3):使用UMEditor并实现图片上传的更多相关文章
- [Asp.net core 2.0]Ueditor 图片上传
摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- yii2解决百度编辑器umeditor图片上传问题
作者:白狼 出处:http://www.manks.top/article/yii2_umeditor_upload本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...
- 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- asp.net多图片上传实现程序代码
下面是一个完整的asp.net同时支持多图片上传一个实现,有需要的朋友可参考一下,本文章限制同时可上传8张图片,当然大可自己可修改更多或更少. 前台代码如下: 复制代码代码如下: <% @ Pa ...
- asp.net图片上传实例
网站后台都需要有上传图片的功能,下面的例子就是实现有关图片上传. 缺点:图片上传到本服务器上,不适合大量图片上传. 第一.图片上传,代码如下: xxx.aspx 复制代码代码如下: <td cl ...
- asp.net多图片上传同时保存对每张图片的描述
前台aspx //图片预览和描述 function previewImage(file) { var div = document.getElementById('preview'); div.inn ...
- ASP.NET MVC应用程序把文字写在图片上
原文:ASP.NET MVC应用程序把文字写在图片上 Insus.NET实现这篇<MVC把随机产生的字符串转换为图片>http://www.cnblogs.com/insus/p/3624 ...
随机推荐
- vtigerCRM5.4的安装和汉化 ubuntu
由于php5.5经过较大改变,安装vtigercrm的时候可能需要修改一些配置 1.去官网下载vtiger5.4压缩包,解压后放在/var/www目录下 2.简单起见,将目录权限设置为777 vtig ...
- PHP模拟登录并获取数据
cURL 是一个功能强大的PHP库,使用PHP的cURL库可以简单和有效地抓取网页并采集内容,设置cookie完成模拟登录网页,curl提供了丰富的函数,开发者可以从PHP手册中获取更多关于cURL信 ...
- C#函数参数
当函数接受参数时,必须指定下属内容 函数在其定义中指定参数列表,以及这些参数的类型 在每个函数调用中匹配参数列表 参数匹配:当调用函数时,必须使参数与函数定义中指定的参数完全匹配,这意味着要匹配参数的 ...
- POJ 2421(prim)
http://poj.org/problem?id=2421 这个题和poj1258是一样的,只要在1258的基础上那么几行代码,就可以A,水. 题意:还是n连通问题,和1258不同的就是这个还有几条 ...
- C++实现VPN工具之代码示例
创建.连接.挂断.删除VPN实现起来并不难,下面给出一套比较完整的代码.该段代码只是示例代码,但是已经通过了编译,对API的使用和VPN操作步骤是没问题的.具体每个API代表的意义可以参看<C+ ...
- Unity3d 怪物死亡燃烧掉效果
效果 BurnToFadeOut.shader代码 Shader "BurnToFadeOut" { Properties { _StartColor ("Start C ...
- Qt QThread 多线程使用
一.继承QThread 使用方法 1.创建个继承QThread的类. #ifndef MYTHREAD_H #define MYTHREAD_H #include <QObject> #i ...
- 简述memcached中的一致哈希
memcached是一个开源的高性能分布式内存对象缓存系统. 其实思想还是比较简单的,实现包括server端(memcached开源项目一般只单指server端)和client端两部分: server ...
- 2106 Problem F Shuffling Along 中石油-未提交-->已提交
题目描述 Most of you have played card games (and if you haven’t, why not???) in which the deck of cards ...
- codeforces 510B. Fox And Two Dots 解题报告
题目链接:http://codeforces.com/problemset/problem/510/B 题目意思:给出 n 行 m 列只有大写字母组成的字符串.问具有相同字母的能否组成一个环. 很容易 ...