# ueditor-blazor

**Repository Path**: ant-design-blazor/ueditor-blazor

## Basic Information

- **Project Name**: ueditor-blazor
- **Description**: 一款 Blazor 富文本编辑器
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 3
- **Created**: 2020-12-14
- **Last Updated**: 2023-09-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ueditor-blazor

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

# 💿 Current Version

- Release: [![UEditorBlazor](https://img.shields.io/nuget/v/UEditorBlazor.svg?color=red&style=flat-square)](https://www.nuget.org/packages/UEditorBlazor/)
- Development: [![UEditorBlazor](https://img.shields.io/nuget/vpre/UEditorBlazor.svg?color=red&style=flat-square)](https://www.nuget.org/packages/UEditorBlazor/)

# Usage

1. Install the package
    ```bash
      $ dotnet add package UEditorBlazor -v 0.1.0-*
    ```

2. Import js resources
    ```html
        <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/ueditor-blazor.js"></script>
    ```

3. That's all! Then you can use the `UEditor.Editor` component.
    ```razor
    <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:

1. Setting the upload api endpoint:

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

2. According to ueditor: http://fex.baidu.com/ueditor/#dev-request_specification	"UEditor Documentation 后端请求规范", json in uploadimage action response will be this:
    
    ```json
        {
        	"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:
    
    ```json
        {
            "state": "SUCCESS",
            "url": "upload/demo.jpg",
            "title": "demo.jpg",
            "original": "demo.jpg",
            "code": 200
        }
    ```

3. Enjoy.