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

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