ueditor blazor

Ueditor-Blazor

Wysiwyg Rich Text Web Editor ตาม Ueditor และ Blazor

- เวอร์ชันปัจจุบัน

• ปล่อย:
• การพัฒนา:

การใช้งาน

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. สนุก.