ueditor blazor

ueditor-blazor

Un editor web de texto rico en Wysiwyg basado en Ueditor y Blazor.

? Versión actual

• Liberar:
• Desarrollo:

Uso

1. Instalar el paquete

     $ dotnet add package UEditorBlazor -v 0.1.0- *

2. Importar recursos 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. ¡Eso es todo! Luego puede usar el componente 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 ;
   }

Carga de imágenes

Si desea implementar la carga de imagen personalizada, siga las instrucciones que se enumeran a continuación:

1. Configuración del punto final de la API de carga:

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

En neditor.service.js , asegúrese en la función getActionUrl , return window.NEDITOR_UPLOAD .

2. Implementación del servidor de carga de imágenes:

2.1 Antes de agregar un controlador API, registre algunas cosas

 services . AddControllers ( ) ; 

2.2 Agregue un directorio para almacenar imágenes

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

El sufijo /I se usa para mostrar imágenes de vista previa. Puede modificar image_path y /I Mientras tanto en el controlador.

2.3 Escriba un controlador API para procesar /api/upload la solicitud

Ver ImageController.cs . Recuerde la root y result.url Las variantes de URL deben ser las mismas que se mencionan en 2.2 .

3. Disfruta.