e062f3b9c0
* setheight需要在ready后使用确保生效
* fix: 🐛 value也需要在ready后设置
|
||
---|---|---|
.github | ||
src | ||
.gitattributes | ||
.gitignore | ||
LICENSE | ||
README.md | ||
UEditor.sln |
README.md
ueditor-blazor
A wysiwyg rich text web editor based on UEditor and Blazor.
💿 Current Version
Usage
-
Install the package
$ dotnet add package UEditorBlazor -v 0.1.0-*
-
Import js resources
<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>
-
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:
1. Setting the upload api endpoint:
<script>
window.NEDITOR_UPLOAD = "/api/upload";
</script>
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
services.AddControllers();
2.2 Add a directory to store images
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
.