.NET CoreでUeditorを使用する.Core

8754 ワード

参照と構成


説明の方法に従って、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.jsueditor.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項目をUEditorControllerUploadメソッドに対応するアドレスに変更します(ルーティングを変更しない場合は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>