.NET CoreでUeditorを使用する.Core
参照と構成
説明の方法に従って、Nugetから
UEditor.Core
クラスライブラリを参照し、Startup.csのConfigureServicesメソッドに、次のコードを追加します.services.AddUEditorService();
AddUEditorService
メソッドでは、いくつかの構成パラメータが送信され、これらの構成はオプションであり、具体的な構成は、ドキュメントのトップページ構成段落の説明を参照することができる.静的リソースフォルダの構成
によってNet Coreのデフォルトでは、wwwrootディレクトリから静的ファイルのみがロードされ、他のフォルダの静的ファイルは正常にアクセスできません.Webサイトのルートディレクトリのuploadフォルダに画像をアップロードしたいので、
Startup.cs
クラスのConfigureメソッドに追加して、次のコードを追加する必要があります.app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "upload")),
RequestPath = "/upload",
OnPrepareResponse = ctx =>
{
ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=36000");
}
});
次に、プロジェクトのルートディレクトリにupload
フォルダを作成します(ここでは作成しないとエラーが発生します).バックエンドプロファイルの追加
次に、ueditorバックエンドの
config.js
をueditor.json
に名前を変更してプロジェクトルートディレクトリに追加する必要があります.ここのプロファイルはueditorのダウンロードパッケージの中で、netフォルダの下で見つけることができて、現在のバージョンの具体的な経路は以下の通りです:
ueditor1_4_3_3-utf8-net\utf8-net
et\config.json
もしあなたがダウンロードするのがおっくうなら、このプロジェクトGitHubのSampleでもいいです.Webの下にueditor.json
ファイルが見つかり、プロジェクトのルートディレクトリに貼り付けられます.Uuditorのダウンロードパッケージからコピーしたファイルの場合は、そのファイルの
/ueditor/net/
を/
にグローバルに置き換える必要があります.バックエンドインタフェースの作成
UeditorControllerを作成し、次のコードを追加します.
public class UEditorController : Controller
{
private readonly UEditorService _ueditorService;
public UEditorController(UEditorService ueditorService)
{
this._ueditorService = ueditorService;
}
// API, MVC API URI
[HttpGet, HttpPost]
public ContentResult Upload()
{
var response = _ueditorService.UploadAndGetResponse(HttpContext);
return Content(response.Result, response.ContentType);
}
}
ドメイン間構成
UuditorのWebサイトのアドレスと上で作成したインタフェースのアドレスが同じドメイン名の下にない場合は、ドメイン間で構成することを忘れないでください.
ドメイン間で移動できるようにするには、次の手順に従います.https://docs.microsoft.com/zh-cn/aspnet/core/security/cors
ueditorの導入と構成
ueditorの公式サイトから最新バージョンの圧縮パッケージをダウンロードし、プロジェクトのwwwrootの下のlibフォルダに配置し、Uuditorを使用する必要があるページまたはグローバルに
ueditor.config.js
およびueditor.all.min.js
ファイルを導入します.ueditor.config.js
ファイルを開き、そのうちのserverUrl
項目をUEditorController
のUpload
メソッドに対応するアドレスに変更します(ルーティングを変更しない場合はUEditor/Upload
).注意:Uuditorエディタがあるページアドレスと、上に書いてあるControllerに対応するインタフェースアドレスが1つのサイトの下にない場合は、serverUrlはドメイン名とポート番号付きのフルパス(http://youhost/UEditor/Upload).
Uuditorの使用開始
このセクションで問題が発生した場合は、Uuditorの公式ドキュメントを参照してください.http://fex.baidu.com/ueditor/.
Uuditorを使用する必要があるHTMLコードに、次のコードを追加します.
<script id="container" name="content" type="text/plain">
Ueditor.Core
script>
ページの最後に次のJSコードを追加します.<script type="text/javascript">
var ue = UE.getEditor('container', {
initialFrameHeight: 500
});
script>