CodeMirror 绑定在 Blazor 应用程序中不起作用

Question

我正在开发一个使用代码编辑器的 Blazor 服务器应用程序。对于代码编辑器，我使用的是 CodeMirror。文本区域在 Blazor 页面上呈现良好，但数据绑定不适用于相应的 C# 字段。

Blazor page screenshot

我的_Host.cshtml文件如下：

@page "/"
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp1</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />

    <script src="~/codemirror/codemirror.js"></script>
    <link rel="stylesheet" href="~/codemirror/codemirror.css">

    <script src="~/codemirror/mode/clike.js"></script>
    <script src="~/codemirror/addon/display/fullscreen.js"></script>
    <link rel="stylesheet" href="~/codemirror/addon/display/fullscreen.css">
    <link rel="stylesheet" href="/codemirror/theme/monokai.css">
    <script>
        function loadCodeEditor() {
            var codemirrorEditor = CodeMirror.fromTextArea(document.getElementById('codearea'), {
                lineNumbers: true,
                styleActiveLine: true,
                matchBrackets: true,
                mode: "text/x-csharp",
                theme: "monokai",
                extraKeys: {
                    "F11": function (cm) {
                        cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                    },
                    "Esc": function (cm) {
                        if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                    }
                }
            });
            codemirrorEditor.setSize(900, 300);
        }
    </script>

</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

而razor页面代码如下：

@page "/"
@inject IJSRuntime JSRuntime;

<h1>Hello, world!</h1>

Welcome to your new app.

<textarea id="codearea" rows="20" @bind="UserCodeInput" @bind:event="oninput" style="height:100px;"></textarea>

<SurveyPrompt Title="How is Blazor working for you?" />

Input Code: @UserCodeInput

@code{

    public string UserCodeInput { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("loadCodeEditor");
        }
    }
}

如果我从 textarea 属性中删除 id="codearea" 并注释掉 JSInterop 方法调用，则绑定工作正常。

请建议如何修复与 CodeMirror 的绑定。

Answer 1

终于可以用CodeMirror编辑器绑定字段了。感谢以下主题：

When I edit the code in a TextArea using CodeMirror how to reflect this into another textarea with js or jQuery

我必须在调用 JavaScript 函数时传递 DotNet 对象引用，然后在 JavaScript 函数中使用 CodeMirror 的 onchange 事件调用 C# 方法并传递代码编辑器的值.

以下是包含工作代码的更新文件：

_Host.cshtml

@page "/"
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp1</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />

    <script src="~/codemirror/codemirror.js"></script>
    <link rel="stylesheet" href="~/codemirror/codemirror.css">

    <script src="~/codemirror/mode/clike.js"></script>
    <script src="~/codemirror/addon/display/fullscreen.js"></script>
    <link rel="stylesheet" href="~/codemirror/addon/display/fullscreen.css">
    <link rel="stylesheet" href="/codemirror/theme/cobalt.css">
    <link rel="stylesheet" href="/codemirror/theme/monokai.css">
    

</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>



    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script>
        function loadCodeEditor(dontNetObjRef) {
                var codemirrorEditor = CodeMirror.fromTextArea(document.getElementById('codearea'), {
                    lineNumbers: true,
                    styleActiveLine: true,
                    matchBrackets: true,
                    mode: "text/x-csharp",
                    theme: "monokai",
                    extraKeys: {
                        "F11": function (cm) {
                            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                        },
                        "Esc": function (cm) {
                            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                        }
                    }
                });
            codemirrorEditor.setSize(900, 500);
            codemirrorEditor.on("change", editor => {
                dontNetObjRef.invokeMethodAsync("UpdateField", editor.getValue());
                console.log(editor.getValue());
            });
            }
    </script>
</body>
</html>

剃须刀页面：

@page "/"
@inject IJSRuntime JSRuntime;

<h1>Hello, world!</h1>

Welcome to your new app.

<textarea id="codearea"></textarea>

<SurveyPrompt Title="How is Blazor working for you?" />

<br />
<br />

Input Code: @UserCodeInput

@code{

    public string UserCodeInput { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {

            await JSRuntime.InvokeVoidAsync("loadCodeEditor", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable("UpdateField")]
    public Task UpdateField(string codeValue)
    {
        UserCodeInput = codeValue;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Answer 2

你必须在客户端触发 change 事件，这会调用 blazor 服务器的数据绑定，你会在 blazor 组件中接收编辑器的输入文本。这样你就不需要从客户端到服务器端的互操作，并在 blazor 默认值上中继。

JavaScript - 客户端

window.initCodeMirror = function () {
    var textArea = document.getElementById('codemirror');
    var editor = CodeMirror.fromTextArea(textArea);

    editor.on('change', function () {
        textArea.innerHTML = editor.getValue();
        textArea.dispatchEvent(new Event('change', { bubbles: true }));
    });
}

Blazor-Component

@inject JsRuntime _jsRuntime

<textarea id="codemirror" @bind="editorText"></textarea>

@code {
    private string editorText;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await _jsRuntime.InvokeVoidAsync("window.initCodeMirror");
        }
    }
}

CodeMirror 绑定在 Blazor 应用程序中不起作用

CodeMirror binding not working in Blazor App

codemirror

blazor

blazor-server-side