0

I have integrated TinyMCE editor 6 to .NET 7 blazor web assembly app according to official doc. https://www.tiny.cloud/docs/tinymce/6/blazor-ref/ https://www.tiny.cloud/docs/tinymce/6/blazor-cloud/

Nuget packages:

<PackageReference Include="TinyMCE" Version="6.5.0" />
<PackageReference Include="TinyMCE.Blazor" Version="1.0.4" />

I'm using TinyMCE Editor component also for 'read only' mode (The reason is that tiny mce is using iframe and the created article looks same in editor mode and readonly mode. I do not have to deal with css.) and I have issue with setting dynamically height of editor acording to content.

I'm using currently autoresize plugin, but it has some bug and it not always resize editor correctly. Sometimes I can see just first 3 lines of text. This bug happens totally randomly.

MudCard is rendered when _html != null, otherwise loading screen is shown.

<MudCard>
      <MudCardContent>
            <Editor
                Value="@_html"
                Conf="@_editorReadOnlyConfig"
                Disable=true
                ScriptSrc="/lib/tinymce/tinymce.min.js"
            />
     </MudCardContent>
</MudCard>

    private readonly Dictionary<string, object> _editorReadOnlyConfig = new()
    {
        { "plugins", new string[] { "autoresize" } }, // https://www.tiny.cloud/docs/plugins/opensource/autoresize/
        { "toolbar", false },
        { "menubar", false },
        { "statusbar", false },
    };

Any ideas how to deal with this?

Thank you!

magino
  • 109
  • 9

1 Answers1

0

I did nasty hack to fix autoresize plugin bug. I try to execute autoResizeCommand command every 100 ms until it succeeds. For some reason Editor is loading too long and executing command to early fails. I have tried to execute this command as a response to some Tiny MCE editor event, but without success. I have also created issue on github tinymce-blazor repository. It is either only autoresize plugin bug, or tinymce-blazor nuget package bug.

    protected async override Task OnInitializedAsync()
    {
        bool success;
        do
        {
            await Task.Delay(100);
            success = await JSRuntime.InvokeAsync<bool>("autoResizeCommand ");
        }
        while (!success);

        await base.OnInitializedAsync();
    }

window.autoResizeCommand = () => {
    try {
        const global = typeof window !== 'undefined' ? window : global;
        if (global.tinymce && global.tinymce.activeEditor) {
            global.tinymce.activeEditor.execCommand('mceAutoResize');
            return true;
        }
        return false;
    } catch (e) {
        return false;
    }
}
magino
  • 109
  • 9