ASP.NET 5探险（3）：使用UMEditor并实现图片上传

2015 年 7 月 15 日5000

您所在的位置：

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和文件的引用。如下所示代码：

@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>




}

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

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

,imageUrl: URL + "../UMEditorUpload/Image"             //图片上传提交地址




,imagePath:URL + "../"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置

上面的第一个配置项是指上传文件要调用的地址，即是UMEditorUploadController中的Image方法的地址。第二个配置项是修改上传文件后保存的相对目录。当然你也可以根据自身的情况调整配置。

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

关键词：

相关文章

本类热门

记一次页面优化及使用缓存机制

Div圆角边框的实现例子+代码

应用越来越广泛的css伪类

div内容上下居中的方法

不透明度opacity

纯CSS实现图片列表悬停放大特效

带箭头阴影的提示框，CSS代码，IE不...

CSS预处理之Less

css-demo

ASP.NET 5探险（3）：使用UMEditor并...

canvas刮奖效果

基础问题整理

随机推荐

热门关键字

0 0

相关文章