A wysiwyg rich text web editor based on UEditor and Blazor.
-
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; }
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 }
-
Enjoy.