TinyMCE 在 Blazor 頁面中消失

Question

我想在 Blazor 服務器端應用程序中使用 TinyMCE，但它在頁面加載時顯示一秒鍾然后消失。 我將其歸咎於StatehasChanged()因此我編寫了一個重新初始化 TinyMCE 並在頁面的OnAfterRender()中調用的互操作函數。

這是 JS 互操作功能：

initTinyMce: function (tinyMceID) { 
    tinymce.init({
        selector: 'textarea.tinyMce' 
    });
    return ""; 

    //var editor = tinyMCE.get(tinyMceID);
    //if (editor && editor instanceof tinymce.Editor) {
    //    editor.init();
    //}
}

在OnAfterRender我這樣稱呼它：

protected override void OnAfterRender() {

    base.OnAfterRender();
    string a = jsInterop.InitTinyMce("myTinyMce").Result;
}

但是它在出現后一秒鍾就消失了。 如何解決這個問題？

Answer 1

我無法讓它模仿這種行為，所以也許您使用的是不同版本的 tinyMce 和 Blazor。 我正在使用 TinyMce 5.3.1 和 .Net Core 3.1。 我看到您轉而使用 SyncFusion，但也許這個答案會幫助到這里來的任何其他人，他們希望像昨天一樣嘗試在 Blazor 中執行此操作。

我認為主要的事情是當你離開時處理元素並在它進入視圖/焦點/加載/等等時重新初始化......

這是我昨晚組裝的一個組件，它應該處理所有部分並使其像常規<InputTextArea>一樣可綁定

我是 Blazor 和組件的新手。 這是我制作的第二個可綁定表單控件。 如果有人對如何做得更好有任何意見或建議，請編輯或告訴我，我可以更新。 謝謝！

在 _Host.html 的 JS 塊中（我使用的是本地版本的 TinyMCE）

<script src="/js/tinymce/tinymce.min.js"></script>

/Shared/Components/Textarea.razor

<textarea id="@Id" @bind-value="Value" @bind-value:event="onchange" />

/Shared/Components/Textarea.razor.cs：

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.JSInterop;

namespace Application.Shared.Components
{
    public partial class Textarea : ComponentBase, IDisposable
    {
        [Inject] private IJSRuntime JSRuntime { get; set; }

        [Parameter] public RenderFragment ChildContent { get; set; }

        [Parameter] public string Value { get; set; }

        [Parameter] public EventCallback<string> ValueChanged { get; set; }

        [Parameter] public string Id { get; set; } = null;

        private DotNetObjectReference<Textarea> _elementRef;

        [Parameter] public MenuModeEnum MenuMode { get; set; } = MenuModeEnum.standard;

        protected string FieldClass => GivenEditContext?.FieldCssClass(FieldIdentifier) ?? string.Empty;

        protected EditContext GivenEditContext { get; set; }

        protected FieldIdentifier FieldIdentifier { get; set; }

        protected string CurrentValue
        {
            get => Value;
            set
            {
                var hasChanged = !EqualityComparer<string>.Default.Equals(value, Value);
                if (!hasChanged) return;

                _ = value;

                Value = value;
                _ = ValueChanged.InvokeAsync(value);
                GivenEditContext?.NotifyFieldChanged(FieldIdentifier);
            }
        }

        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
            this.Id = Id ?? Guid.NewGuid().ToString();
            _elementRef = DotNetObjectReference.Create(this);
        }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await JSRuntime.InvokeVoidAsync("TinyMce.init", Id, Enum.GetName(typeof(MenuModeEnum), MenuMode), _elementRef);
            }
        }

        [JSInvokable("textArea_OnChange")]
        public void Change(string value)
        {
            CurrentValue = value;
        }

        protected virtual void Dispose(bool disposing)
        {
            JSRuntime.InvokeVoidAsync("TinyMce.dispose", Id, _elementRef);
        }

        void IDisposable.Dispose()
        {
            Dispose(disposing: true);
        }


        internal void DismissInstance()
        {
            JSRuntime.InvokeVoidAsync("TinyMce.dispose", Id, _elementRef);
            StateHasChanged();
        }
    }
}

/Shared/Components/Enums/MenuModeEnum.cs：

namespace Application.Shared.Components.Enums
{
    public enum MenuModeEnum
    {
        standard,
        minimal,
        grouped,
        bloated
    }
}

/wwwroot/js/site.js：

if (!window.TinyMce) {
    window.TinyMce = {};
}

window.TinyMce = {
    params : {
        standard: {
            plugins: 'code codesample link image autolink lists media paste table table spellchecker',
            toolbar1: 'undo redo | paste | removeformat styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image media codesample | table | code | spellchecker',
            menubar: false,
            branding: false,
            toolbar_mode: 'floating'
        },
        minimal: {
            toolbar1: 'bold italic underline',
            menubar: false,
            branding: false,
            toolbar_mode: 'floating'
        },
        grouped: {
            plugins: "emoticons hr image link lists charmap table",
            toolbar: "formatgroup paragraphgroup insertgroup",
            toolbar_groups: {
                formatgroup: {
                    icon: 'format',
                    tooltip: 'Formatting',
                    items: 'bold italic underline strikethrough | forecolor backcolor | superscript subscript | removeformat'
                },
                paragraphgroup: {
                    icon: 'paragraph',
                    tooltip: 'Paragraph format',
                    items: 'h1 h2 h3 | bullist numlist | alignleft aligncenter alignright alignjustify | indent outdent'
                },
                insertgroup: {
                    icon: 'plus',
                    tooltip: 'Insert',
                    items: 'link image emoticons charmap hr'
                }
            },
            menubar: false,
            branding: false
        },
        bloated: {
            plugins: 'code codesample link image autolink lists media paste table table spellchecker',
            toolbar1: 'undo redo | styleselect | forecolor | bold italic underline strikethrough | link image media codesample | table | code | spellchecker',
            toolbar2: 'h1 h2 h3 | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent | emoticons charmap hr',
            menubar: false,
            branding: false,
            toolbar_mode: 'floating'
        }
    },
    init: function (id, mode, dotnetHelper) {
        var params = window.TinyMce.params[mode];
        params.selector = '#' + id;

        params.setup = function (editor) {
            editor.on('change', function (e) {
                console.log($('#' + id).val());
                $('#' + id).val(editor.getContent());
                $('#' + id).change();
                console.log($('#' + id).val());
                dotnetHelper.invokeMethodAsync("textArea_OnChange", $('#' + id).val());
            });
        }

        tinymce.init(params);
    },
    dispose: function (id, dotnetHelper) {
        tinymce.remove('#' + id);
    }
};

用法：

<Textarea MenuMode="@MenuModeEnum.minimal" @bind-Value="@SomeObject.Comments" />

Answer 2

您的應用程序是否啟用了預渲染？ 如果是這樣，則應通過IComponentContext進行檢查。 在預渲染期間無法調用JavaScript

嘗試下面的代碼...

@page "/"
@inject IComponentContext ComponentContext

<h1>Hello, world!</h1>

Welcome to your new app.

@code
{

    protected override Task OnAfterRenderAsync()
    {
        if( ComponentContext.IsConnected )
          {

          string a = jsInterop.InitTinyMce("myTinyMce").Result;
         }

        return base.OnAfterRenderAsync();
    }
}

注意：使用StateHasChanged（）時會厭倦遞歸操作，應使用防范措施

希望這可以幫助