ASP.NET 5の冒険 (3): UMEditorを使用して画像upload_html/css_WEB-ITnoseを実装する

(この記事は私のWeChat公開アカウント「dotNET Daily Essence Articles」でも公開しています。右のQRコードからフォローしてください。)

タイトル: 今日は前回の記事に引き続き、BaiduリッチテキストWebエディタについて説明します。 UEditor または UMEditor の使用。

前回の記事「ASP.NET 5 の冒険」では、ASP.NET 5 でファイルのアップロードを実装する方法を共有しました。私がこの問題を検討した理由は、Baidu のリッチテキスト Web エディタ UMEditor で画像のアップロードを実装するためです。そこで今日は、ASP.NET 5 の MVC 6 プロジェクトで UMEditor を使用する方法を振り返ってみましょう (UEditor の使用方法も同様であるはずです)。

1. UMEditor の公式 Web サイトからインストール パッケージをダウンロードします。ダウンロードした .NET バージョンに含まれるバックエンド コードも直接使用することはできないため、UTF-8 バージョンのいずれでも使用できます。

2. wwwroot に 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. 「ファイルのアップロード」で説明した方法に基づいて、画像をアップロードするためのコントローラーを実装します。 UMEditor が提供するバックグラウンド コードに基づいて、アップロードされた画像処理ロジック全体を変更しました。コードを GitHub に共有しました。「原文を読む」からアクセスできます。 「UMEditorUploadController.cs」と「Uploader.cs」の2つのファイルです。

5. 最後のステップは、上記のコントローラーを正しく使用できるように「umeditor.config.js」ファイルの構成を変更することです。具体的な変更は次のとおりです。

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

上記の最初の構成項目は、ファイルのアップロード時に呼び出されるアドレスを参照します。これは、UMEditorUploadController の Image メソッドのアドレスです。 2 番目の構成項目は、アップロードされたファイルを変更した後に保存される相対ディレクトリです。もちろん、独自の状況に応じて構成を調整することもできます。