ASP.NET 5 Adventure (3): Use UMEditor and implement image upload_html/css_WEB-ITnose

(This article is also published on my WeChat public account "dotNET Daily Essence Articles". Welcome to follow the QR code on the right.)

Title: Today will continue the previous article Let’s explain the use of Baidu rich text web editor UEditor or UMEditor.

In the previous article "ASP.NET 5 Adventure", I shared with you how to implement file upload in ASP.NET 5. The reason why I studied this issue is to implement image uploading in Baidu's Baidu rich text Web editor UMEditor. So today we will look back at how to use UMEditor in an MVC 6 project in ASP.NET 5 (the use of UEditor should be similar).

1. Download the installation package from the UMEditor official website. Any version of the UTF-8 version will do, because even the back-end code included in the .NET version you download cannot be used directly.

2. Create a folder in wwwroot to contain the front-end file of UMEditor. For example, mine is "umeditor". Unzip the installation package file and put it in this folder. Be careful not to include subfolders with backend code.

3. To use it, it is similar to a normal front-end framework. In the view file (cshtml), add references to the css and js files. The code is as follows:

@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. Based on the method described in "Uploading Files", implement a Controller for uploading images. I modified the entire uploaded image processing logic based on the background code provided by UMEditor. I have shared my code to GitHub, which can be accessed by "Read the original text". It is the two files "UMEditorUploadController.cs" and "Uploader.cs".

5. The last step is to modify the configuration in the "umeditor.config.js" file so that it can correctly use the above Controller. The specific modifications are as follows:

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

The first configuration item above refers to the address to be called when uploading files, which is the address of the Image method in UMEditorUploadController. The second configuration item is the relative directory where the uploaded file is saved after modifying it. Of course, you can also adjust the configuration according to your own situation.