https://github.com/ant-design-blazor/ueditor-blazor

A wysiwyg rich text web editor based on UEditor and Blazor.
https://github.com/ant-design-blazor/ueditor-blazor

blazor editor wysiwyg

Last synced: about 8 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ant-design-blazor/ueditor-blazor
• Owner: ant-design-blazor
• License: apache-2.0
• Created: 2020-12-14T05:17:02.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-10-31T16:21:56.000Z (about 1 year ago)
• Last Synced: 2024-10-08T04:27:33.183Z (about 1 month ago)
• Topics: blazor, editor, wysiwyg
• Language: JavaScript
• Homepage: https://ant-design-blazor.github.io/ueditor-blazor/
• Size: 26.4 MB
• Stars: 51
• Watchers: 4
• Forks: 10
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

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

        

            window.NEDITOR_UPLOAD = "/api/upload";

        

        

        

        

        

    ```

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

    ```razor

    

    

    @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

    window.NEDITOR_UPLOAD = "/api/upload";

```

In `neditor.service.js`, be sure in `getActionUrl` function, return `window.NEDITOR_UPLOAD`.

### 2. Image upload server implementing:

#### 2.1 Before adding an api controller, register some stuffs

```c#

services.AddControllers();

```

#### 2.2 Add a directory to store images

```c#

app.UseStaticFiles(new StaticFileOptions {

    FileProvider = new PhysicalFileProvider(image_path),

    RequestPath = "/I"

})

```

The `/I` suffix is used to show preview images. You can modify `image_path` and `/I` meantime in the controller.

#### 2.3 Write an api controller to process `/api/upload` request

See `ImageController.cs`. Remember the `root` and `result.url` variants should be the same as mentioned in `2.2`.

### 3. Enjoy.