ueditor blazor

Ueditor-Blazor

Веб -редактор богатого Wysiwyg, основанный на Ueditor и Blazor.

? Текущая версия

• Выпускать:
• Разработка:

Использование

1. Установите пакет

     $ dotnet add package UEditorBlazor -v 0.1.0- *

2. Импорт JS Resources

       < 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 , return 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. Наслаждайтесь.