(此文章同时发表在本人微信公众号“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并实现图片上传的更多相关文章

  1. [Asp.net core 2.0]Ueditor 图片上传

    摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...

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

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  3. yii2解决百度编辑器umeditor图片上传问题

    作者:白狼 出处:http://www.manks.top/article/yii2_umeditor_upload本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...

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

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  5. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  6. asp.net多图片上传实现程序代码

    下面是一个完整的asp.net同时支持多图片上传一个实现,有需要的朋友可参考一下,本文章限制同时可上传8张图片,当然大可自己可修改更多或更少. 前台代码如下: 复制代码代码如下: <% @ Pa ...

  7. asp.net图片上传实例

    网站后台都需要有上传图片的功能,下面的例子就是实现有关图片上传. 缺点:图片上传到本服务器上,不适合大量图片上传. 第一.图片上传,代码如下: xxx.aspx 复制代码代码如下: <td cl ...

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

    前台aspx //图片预览和描述 function previewImage(file) { var div = document.getElementById('preview'); div.inn ...

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

    原文:ASP.NET MVC应用程序把文字写在图片上 Insus.NET实现这篇<MVC把随机产生的字符串转换为图片>http://www.cnblogs.com/insus/p/3624 ...

随机推荐

  1. vtigerCRM5.4的安装和汉化 ubuntu

    由于php5.5经过较大改变,安装vtigercrm的时候可能需要修改一些配置 1.去官网下载vtiger5.4压缩包,解压后放在/var/www目录下 2.简单起见,将目录权限设置为777 vtig ...

  2. PHP模拟登录并获取数据

    cURL 是一个功能强大的PHP库,使用PHP的cURL库可以简单和有效地抓取网页并采集内容,设置cookie完成模拟登录网页,curl提供了丰富的函数,开发者可以从PHP手册中获取更多关于cURL信 ...

  3. C#函数参数

    当函数接受参数时,必须指定下属内容 函数在其定义中指定参数列表,以及这些参数的类型 在每个函数调用中匹配参数列表 参数匹配:当调用函数时,必须使参数与函数定义中指定的参数完全匹配,这意味着要匹配参数的 ...

  4. POJ 2421(prim)

    http://poj.org/problem?id=2421 这个题和poj1258是一样的,只要在1258的基础上那么几行代码,就可以A,水. 题意:还是n连通问题,和1258不同的就是这个还有几条 ...

  5. C++实现VPN工具之代码示例

    创建.连接.挂断.删除VPN实现起来并不难,下面给出一套比较完整的代码.该段代码只是示例代码,但是已经通过了编译,对API的使用和VPN操作步骤是没问题的.具体每个API代表的意义可以参看<C+ ...

  6. Unity3d 怪物死亡燃烧掉效果

    效果 BurnToFadeOut.shader代码 Shader "BurnToFadeOut" { Properties { _StartColor ("Start C ...

  7. Qt QThread 多线程使用

    一.继承QThread 使用方法 1.创建个继承QThread的类. #ifndef MYTHREAD_H #define MYTHREAD_H #include <QObject> #i ...

  8. 简述memcached中的一致哈希

    memcached是一个开源的高性能分布式内存对象缓存系统. 其实思想还是比较简单的,实现包括server端(memcached开源项目一般只单指server端)和client端两部分: server ...

  9. 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 ...

  10. codeforces 510B. Fox And Two Dots 解题报告

    题目链接:http://codeforces.com/problemset/problem/510/B 题目意思:给出 n 行 m 列只有大写字母组成的字符串.问具有相同字母的能否组成一个环. 很容易 ...