serdarciplak / BlazorMonaco

Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.
https://serdarciplak.github.io/BlazorMonaco/
MIT License
432 stars 98 forks source link

Two way binding with Editor #132

Open kvinita opened 2 months ago

kvinita commented 2 months ago

I have installed and configured the BlazorMonaco in my Blazor WebAssembly application as directed here: https://github.com/serdarciplak/BlazorMonaco

The editor is shown below: image

Below is my razor file: Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<div class="parent">
    <div class="header">
        <button data-toggle="tooltip" data-placement="bottom" title="Format"
                @onclick=@(()=>FormatXml())>
            <svg version="1.1" class="fa-icon svelte-1mc5hvj" fill="white" width="16" height="16" aria-label="" role="presentation" viewBox="0 0 512 512" style=""><path d="M 0,32 v 64 h 416 v -64 z M 160,160 v 64 h 352 v -64 z M 160,288 v 64 h 288 v -64 z M 0,416 v 64 h 320 v -64 z"></path></svg>
        </button>

        <button data-toggle="tooltip" data-placement="bottom" title="Compact"
                @onclick=@(()=>CompactXml())>
            <svg version="1.1" class="fa-icon svelte-1mc5hvj" fill="white" width="16" height="16" aria-label="" role="presentation" viewBox="0 0 512 512" style=""><path d="M 0,32 v 64 h 512 v -64 z M 0,160 v 64 h 512 v -64 z M 0,288 v 64 h 352 v -64 z"></path></svg>
        </button>
    </div>
    <StandaloneCodeEditor Id="my-editor-id" ConstructionOptions="EditorConstructionOptions" CssClass="my-editor-class" />
</div>

@code {
    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
    {
        return new StandaloneEditorConstructionOptions
            {
                AutomaticLayout = true,
                Language = "xml"
            };
    }
}

On click of a button, I need to get the entire text in the editor and perform some operations on it and display the modified text in the editor. Basically I need a way to do two-way binding with the editor. How do I achieve this?

Let me know if additional details are required. Any leads would be appreciated.