ueditor blazor

Ueditor-Blazor

Ein Wysiwyg Rich Text Web Editor basierend auf Ueditor und Blazor.

? Aktuelle Version

• Freigeben:
• Entwicklung:

Verwendung

1. Installieren Sie das Paket

     $ dotnet add package UEditorBlazor -v 0.1.0- *

2. JS -Ressourcen importieren

       < 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. Das ist alles! Dann können Sie die UEditor.Editor -Komponente verwenden.

   < UEditor .Editor @ref = " editor " @bind-Value = " value " @bind-Html = " html " Height = " 500px " Width = " 700px " />
   
   @code {
       string value = " Hello Blazor! " ;
       string html ;
   
       Editor editor ;
   }

Bildladen

Wenn Sie benutzerdefiniertes Bildladen implementieren möchten, befolgen Sie die unten aufgeführten Anweisungen:

1. Festlegen des Endpunkts des API -Endpunkts des Uploads:

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

In neditor.service.js stellen Sie sicher, dass die getActionUrl -Funktion window.NEDITOR_UPLOAD .

2. Image -Upload -Server implementieren:

2.1 Vor dem Hinzufügen eines API -Controllers registrieren Sie einige Dinge

 services . AddControllers ( ) ; 

2.2 Fügen Sie ein Verzeichnis hinzu, um Bilder zu speichern

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

Das /I -Suffix wird verwendet, um Vorschaubilder anzuzeigen. Sie können image_path und /I mittlerer im Controller ändern.

2.3 Schreiben Sie einen API -Controller, um die Anforderung zu verarbeiten /api/upload

Siehe ImageController.cs . Denken Sie an die root und result.url -Varianten 2.2

3. Genießen Sie.