ueditor blazor

Ueditor-Blazor

Editor Web Teks Kaya Wysiwyg Berdasarkan Ueditor dan Blazor.

? Versi saat ini

• Melepaskan:
• Perkembangan:

Penggunaan

1. Instal paket

     $ dotnet add package UEditorBlazor -v 0.1.0- *

2. Impor sumber daya 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. Itu saja! Kemudian Anda dapat menggunakan komponen 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 ;
   }

Pemuatan gambar

Jika Anda ingin menerapkan pemuatan gambar khusus, ikuti instruksi yang tercantum di bawah ini:

1. Mengatur titik akhir unggahan API:

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

Di neditor.service.js , pastikan dalam fungsi getActionUrl , return window.NEDITOR_UPLOAD .

2. Image Unggah Server Menerapkan:

2.1 Sebelum menambahkan pengontrol API, daftarkan beberapa barang

 services . AddControllers ( ) ; 

2.2 Tambahkan direktori untuk menyimpan gambar

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

Suffix /I digunakan untuk menampilkan gambar pratinjau. Anda dapat memodifikasi image_path dan /I sementara di pengontrol.

2.3 Tulis pengontrol API untuk memproses /api/upload permintaan

Lihat ImageController.cs . Ingat root dan result.url Varian harus sama seperti yang disebutkan dalam 2.2 .

3. Nikmati.