ueditor blazor

Ueditor-Blazor

UeditorとBlazorに基づくWysiwyg Rich Text Webエディター。

？現在のバージョン

• リリース：
• 発達：

使用法

1. パッケージをインストールします

     $ dotnet add package UEditorBlazor -v 0.1.0- *

2. JSリソースをインポートします

       < script >
           window . NEDITOR_UPLOAD = "/api/upload" ;
       </ script >
       < script src =" _content/UEditorBlazor/neditor.config.js " > </ script >
       < script src =" _content/UEditorBlazor/neditor.all.min.js " defer > </ script >
       < script src =" _content/UEditorBlazor/neditor.service.js " > </ script >
       < script src =" _content/UEditorBlazor/ueditor-blazor.js " > </ script >

3. それだけです！次に、 UEditor.Editorコンポーネントを使用できます。

   < UEditor .Editor @ref = " editor " @bind-Value = " value " @bind-Html = " html " Height = " 500px " Width = " 700px " />
   
   @code {
       string value = " Hello Blazor! " ;
       string html ;
   
       Editor editor ;
   }

画像読み込み

カスタム画像の読み込みを実装する場合は、以下にリストされている手順に従ってください。

1.アップロードAPIエンドポイントの設定：

 < script >
    window . NEDITOR_UPLOAD = "/api/upload" ;
</ script >

neditor.service.jsで、 getActionUrl window.NEDITOR_UPLOADを確認してください。

2。画像アップロードサーバーの実装：

2.1 APIコントローラーを追加する前に、いくつかのものを登録します

 services . AddControllers ( ) ; 

2.2画像を保存するディレクトリを追加します

 app . UseStaticFiles ( new StaticFileOptions {
    FileProvider = new PhysicalFileProvider ( image_path ) ,
    RequestPath = "/I"
} )

/I接尾辞は、プレビュー画像を表示するために使用されます。コントローラーでimage_pathおよび/Iを変更できます。

2.3 APIコントローラーを書き込み、 /api/upload要求を処理します

ImageController.csを参照してください。 rootとresult.urlを覚えておいてください。urlバリアントは、 2.2で言及されているものと同じである必要があります。

3。お楽しみください。