Blazor其实也是支持与js进行互动的，互动方式也相当的简单，只是有些东西并没有csharp版本的实现，比如富文本编辑器，代码高亮这些，现在流行的都是js版本，所以在blazor中使用时就不得不与js互动，联合完成任务，但是其中要注意的时，如果页面修改了，会触发blazor的页面更新机制，会导致js的代码高亮等与blazor框架冲突，为了解决这些问题，必须要通过blazor调用js更新页面这种方式，代码如下：
wangEditor的官网是：https://www.wangeditor.com/ 这是一个国内的人开发的富文本编辑器，目前blazor中没什么富文本编辑器，有国外的人用gedit做了blazor组件，但是用起来用js奔溃的bug一直都没修复，其他的框架中有，但是需要使用一整套其他的框架，而mudblazor中并没有富文本编辑器，所以不得不自己找一个，再做成组件。代码如下

        @using System.Net;
        @using Microsoft.AspNetCore.Components.Forms;
        @layout MainLayout
        @inject IJSRuntime JsRuntime

        <MudPaper Elevation="5" Class="py-5 px-2 ma-2">
            <MudToolBar Style="@Theme.GetStyle()">
                <MudTooltip Text="保存" Color="Color.Success" Placement="Placement.Top" Arrow="true">
                    <MudIconButton Icon="@Icons.Material.Filled.SaveAs" Color="Color.Success" OnClick="SaveHtml"></<MudIconButton>
                </<MudTooltip>
            </<MudToolBar>
            <div id="zmjedit">
                @(new MarkupString(CurrentNote.HtmlContent ?? "<a href=\"http://BlazorHelpWebsite.com\">help</<a>"))
            </<div>
            <textarea id="zmjtextout" style="display: none;opacity:0;"></<textarea>
        </MudPaper>
        <MudPaper Elevation="5" Class="py-5 px-2 ma-2">
            <textarea id="zmjtextin" style="width:100%;height:180px;"></<textarea>
        </<MudPaper>

        @code {
            /// <summary>
            /// 保存当前的编辑结果
            /// </<summary>
            private void SaveHtml()
            {
                JsRuntime.InvokeAsync<string>("GetEditHtml").AsTask().ContinueWith(t =>
                {
                    var msg = "保存成功！";
                    try
                    {
                        t.Result//保存到数据库
                    }
                    catch (Exception ex)
                    {
                        msg = ex.InnerException?.Message ?? ex.Message;
                    }
                    this.InvokeAsync(() => DialogService.ShowMessageBox("提示", msg));
                });
            }
            /// <summary>
            /// 保存当前的content内容
            /// </<summary>
            private void SaveHtmlContent()
            {
                var msg = "保存成功！";
                try
                {
                    //保存到数据库
                }
                catch (Exception ex)
                {
                    msg = ex.InnerException?.Message ?? ex.Message;
                }
                DialogService.ShowMessageBox("提示", msg);
            }
            /// <summary>
            /// 初始化note编辑器
            /// </<summary>
            /// <param name="firstRender"></<param>
            protected override async Task OnAfterRenderAsync(bool firstRender)
            {
                await base.OnAfterRenderAsync(firstRender);
                if (!firstRender) return;
                await JsRuntime.InvokeVoidAsync("import", "//www.unpkg.com/wangeditor/dist/wangEditor.min.js");
                await JsRuntime.InvokeVoidAsync("import", "/script/zmjscript.js");
                await JsRuntime.InvokeVoidAsync("InitWangEditor", "zmjedit", "zmjtextout", "zmjtextin");
            }
        }
    

然后再写一个js代码放在wwwroot文件夹下的某个位置，代码如下：

        window.InitWangEditor = function (srccontext, editcontext, newedit) {//初始化wangeditor部分
            const E = window.wangEditor;
            const editor = new E('#' + srccontext);
            // 或者 const editor = new E( document.getElementById('div1') )
            editor.config.height = 800;
            editor.config.zIndex = 500;
            const $formtextarea = $('#' + editcontext);
            editor.config.onchange = function (html) {
                // 第二步，监控变化，同步更新到 textarea
                $formtextarea.val(encodeURI(html))
            }// 第一步，初始化 textarea 的值
            $formtextarea.val(encodeURI(editor.txt.html()));
            $("#" + newedit)[0].onchange = function () {
                let h = this.value
                console.log(h)
                $formtextarea.val(encodeURI(h))
                editor.txt.html(h)
            }
            // 配置 server 接口地址
            editor.config.uploadImgServer = "/上传图片的url地址";
            //关闭样式过滤。
            //editor.config.pasteFilterStyle = false;
            try {
                // 挂载highlight插件
                //hljs.highlightAll();//srccontext是被编辑的原文div的id,editcontext是输出对象比如texteare的id，uploadurl是上传图片的api的url
                editor.highlight = hljs;
            } catch { }
            editor.create();
            window.ZmjHtmlEditor = editor;
        }
        window.GetEditHtml = function () {//获取正在编辑的html内容
            try {
                return window.ZmjHtmlEditor.txt.html();
            } catch {
                return "";
            }
        }
    

在需要富文本编辑器的组件或者页面中直接嵌入以上代码即可。