ueditor-blazor's Introduction

ueditor-blazor

A wysiwyg rich text web editor based on UEditor and Blazor.

💿 Current Version

Release:
Development:

Usage

Install the package

  $ dotnet add package UEditorBlazor -v 0.1.0-*

Import js resources

    <script src="_content/UEditorBlazor/neditor.config.js"></script>
    <script src="_content/UEditorBlazor/neditor.all.min.js" defer></script>
    <script src="_content/UEditorBlazor/ueditor-blazor.js"></script>

That's all! Then you can use the UEditor.Editor component.

<UEditor.Editor @ref="editor" @bind-Value="value" @bind-Html="html" Height="500px" Width="700px" />

@code {
    string value = "Hello Blazor!";
    string html;

    Editor editor;
}

Image Loading

If you want to implement custom image loading, follow the instructions listed below:

Make sure there are some configuration in config file: neditor.config.js, neditor.service.js.

    serverUrl: "$YOUR_POST_URL", //About Line 31

    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == "uploadimange") {
            return '$YOUR_POST_URL'; //About Line 10-11
        }
        ... //rest of codes
    }

According to

, json in uploadimage action response will be this:

    {
    	"state": "SUCCESS",
    	"url": "upload/demo.jpg",
	"title": "demo.jpg",
    	"original": "demo.jpg"
}

After implementation like above json format response, there will be no images inserted into your editor.

neditor.server.js line 60 in getResponseSuccess method requires there will be a code field in json:

    {
        "state": "SUCCESS",
        "url": "upload/demo.jpg",
        "title": "demo.jpg",
        "original": "demo.jpg",
        "code": 200
    }