如何优雅的移植JavaScript组件到Blazor (3)

经过上述不知，组件基本移植完了，但还不能很好的使用，第一，因为界面是 js在操作，所以我们应该禁用 Blazor组件的渲染：

protected override bool ShouldRender() { return false; }

在js的options中有个initialValue属性，是初始化内容的，我们改成Blazor的形式，最好是可以绑定：

[Parameter] public EventCallback<TuiEditor> OnBlur { get; set; } protected override void OnInitialized() { if (Options == null) Options = new TuiEditorOptions(); Options.InitialValue = _value; Options.elid = Id; //这里也是通过js事件触发 JSCallbackManager.AddEventHandler(Id, "blur", new Func<Task>(async () => { await setValue(); await OnBlur.InvokeAsync(this); })); base.OnInitialized(); } private string _value; [Parameter] public string Value { get { return _value; } set { _value = value; SetMarkdown(value, true); } } [Parameter] public EventCallback<string> ValueChanged { get; set; } private async Task setValue() { _value = await GetMarkdown(); await ValueChanged.InvokeAsync(_value); } public void SetMarkdown(string markdown, bool cursorToEnd = true) { editor?.InvokeVoidAsync("setMarkdown", markdown, cursorToEnd); }

这样我们就可以使用 Blazor 绑定语法了：

<TuiEditor @bind-Value="markdown"></TuiEditor> @code{ private string markdown = "# Init Title"; }

效果如下：

在线效果点击这里

源代码

BulmaRazor官网

Gitee地址

Github地址

希望喜欢 Blazor 和 BulmaRazor 的朋友给个Star鼓励一下！该项目从2021年的春节假期开始，一个人做真心的累和耗时，您的鼓励是我坚持下午的最大动力！