Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Two way binding with Editor #132

Open
kvinita opened this issue May 15, 2024 · 1 comment
Open

Two way binding with Editor #132

kvinita opened this issue May 15, 2024 · 1 comment

Comments

@kvinita
Copy link

kvinita commented May 15, 2024

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.

@kvinita kvinita changed the title Styling issue Two way binding with Editor May 16, 2024
@CHL-NexAIoT
Copy link

My workarouond for now is to use a reference with GetValue and SetValue.
Simple example is like this:

<button data-toggle="tooltip" data-placement="bottom" title="Compact"
                @onclick=@(()=>CompactXml())>
<StandaloneCodeEditor @ref="editor" OnDidChangeModelContent="OnChange" />

@code {
    private StandaloneCodeEditor editor = null!;
    private string cache = "";

    protected override void OnInitialized()
    {
        editor = new();
    }

    private async Task OnChange()
    {
        cache = await editor.GetValue();
    }

    private async Task CompactXml()
    {
        // modify the cache
        await editor.SetValue(cache);
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants