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方法的地址。第二個配置項是修改上傳文件後保存的相對目錄。當然你也可以根據自身的情況調整配置。