ueditor blazor

Ueditor-Blazor

Un éditeur Web de texte riche en Wysiwyg basé sur UEditor et Blazor.

? Version actuelle

• Libérer:
• Développement:

Usage

1. Installer le package

     $ dotnet add package UEditorBlazor -v 0.1.0- *

2. Importer des ressources 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. C'est tout! Ensuite, vous pouvez utiliser le composant 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 ;
   }

Chargement d'image

Si vous souhaitez implémenter le chargement d'image personnalisé, suivez les instructions répertoriées ci-dessous:

1. Définition du point de terminaison de l'API de téléchargement:

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

Dans neditor.service.js , assurez-vous dans la fonction getActionUrl , return window.NEDITOR_UPLOAD .

2. Implémentation du serveur de téléchargement d'image:

2.1 Avant d'ajouter un contrôleur API, enregistrez certaines choses

 services . AddControllers ( ) ; 

2.2 Ajouter un répertoire pour stocker des images

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

Le suffixe /I est utilisé pour afficher des images d'aperçu. Vous pouvez modifier image_path et /I en attendant dans le contrôleur.

2.3 Écrivez un contrôleur API pour traiter /api/upload la demande

Voir ImageController.cs . N'oubliez pas que les variantes root et result.url doivent être les mêmes que celles mentionnées dans 2.2 .

3. Profitez.