ueditor blazor

Ueditor-Blazor

Um editor da Web de texto rico em Wysiwyg, baseado no Ueditor e no Blazor.

? Versão atual

• Liberar:
• Desenvolvimento:

Uso

1. Instale o pacote

     $ 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. Isso é tudo! Em seguida, você pode usar o 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 ;
   }

Carregamento de imagem

Se você deseja implementar o carregamento de imagem personalizado, siga as instruções listadas abaixo:

1. Configurando o endpoint da API de upload:

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

Em neditor.service.js , certifique -se da função getActionUrl , retornar window.NEDITOR_UPLOAD .

2. Implementação de servidor de upload de imagem:

2.1 Antes de adicionar um controlador de API, registre algumas coisas

 services . AddControllers ( ) ; 

2.2 Adicione um diretório para armazenar imagens

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

O sufixo /I é usado para mostrar imagens de visualização. Você pode modificar image_path e /I entretanto, no controlador.

2.3 Escreva um controlador de API para processar /api/upload Solicy

Veja ImageController.cs . Lembre -se da root e result.url 2.2

3. Aproveite.