ueditor blazor

Ueditor-Blazor

基於Ueditor和Blazor的Wysiwyg豐富的文本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變體應與2.2中提到的變體相同。

3。享受。