ueditor blazor

Ueditor-Blazor

محرر ويب WysiWyg Rich Rich يعتمد على 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 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. استمتع.