blazor-https://github.com/bennnos/Blazor.AceJS

[删除（380066935@qq.com或微信通知）]

bennnos/Blazor.AceJS: A simple nuget package to use AceEditor.js with blazor (github.com)

Blazor.AceJS

Overview

A simple nuget package to use AceEditor.js with blazor. Base project:https://github.com/ajaxorg/ace

Usage

  1. Run Install-Package Blazor.AceEditorJs in the package manager console to install the latest package in your frontend project. Also available here: https://www.nuget.org/packages/Blazor.AceEditorJs

  2. Add references to necessary js in your index.html

    • Add '<script src="_content/Blazor.AceEditorJs/BlazorAceEditor.min.js"></script>` to the body

  3. Add @using Blazor.AceEditorJs to your page

  4. Add the component to your view and build the editor like so: ->Use the class 'AceEditorOptions' to select the theme, the language and the property 'ReadOnly'.

    @page "/EditorDemo"
@using Blazor.AceEditorJs   

<PageTitle>EditorDemo</PageTitle>
<AceJsEditor  Style="height:300px" @bind-Value ="@textToEdit" Options="opt"></AceJsEditor>
<p>@textToEdit</p>

@code {
    string textToEdit = "Select * from Test";
    AceEditorOptions opt = new() { IsReadOnly = false, Language = AceLanguage.sqlserver, Theme = AceTheme.sqlserver };
}

  5. test image

-> you can update the Ace options in using the method 'AceJsEditor.SetAceEditorParameters(AceEditorOptions)' . Don't hesitate to see the demo project to see interactions.

 @page "/EditorDemo"
 @using Blazor.AceEditorJs   

 <PageTitle>EditorDemo</PageTitle>
 <AceJsEditor @ref="reference" Style="height:300px" @bind-Value ="@textToEdit" Options="opt"></AceJsEditor>
 <p>@textToEdit</p>

 @code {
     string textToEdit = "Select * from Test";
     AceJsEditor? reference;
     AceEditorOptions opt = new() { IsReadOnly = false, Language = AceLanguage.sqlserver, Theme = AceTheme.sqlserver };
     
     private async Task ChangeTheme(ChangeEventArgs e)
     {
         string theme = e.Value.ToString();
         opt.Theme = (AceTheme)Enum.Parse(typeof(AceTheme), theme);
         await reference.SetAceEditorParameters(opt);
     }
 }

Multiple editor instances can also be rendered on the same page with different configurations.

image

The list of themes and languages for enum 'AceLanguage' and 'AceTheme' can be retrieved from the demo project but also here:https://ace.c9.io/tool/mode_creator.html

image