TinyMCE editor only loading on first refresh (TinyMCE.Blazor + .NET 8)

181 Views Asked by At

I am trying out the new Blazor App template in .NET 8 to check if it is a viable option for a new app. Currently I am trying to add TinyMCE to a page (after following the steps in https://www.tiny.cloud/docs/tinymce/6/blazor-cloud.

However, the editor only works on first page load, when I navigate to another page and back the editor just disappears. And if I remove: @rendermode="InteractiveServer" I see just a html textarea. My code:

@page "/weather"

@attribute [StreamRendering]


<div class="row">
    <div class="col-md-12">
            <TinyMCE.Blazor.Editor @rendermode="InteractiveServer" ApiKey="@_apikey" Conf="@_conf" Value="@_initialValue" />
    </div>


</div>


@code {
    
    private readonly string _initialValue = "Welcome to TinyMCE Blazor";

    private readonly string _apikey = "";

    private Dictionary<string, object> _conf = new Dictionary<string, object> {

        { "height", 500},
        { "toolbar", "undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat | a11ycheck casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist checklist outdent indent | removeformat | advcode table help"},
        { "plugins", "mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen footnotes advtemplate advtable advcode editimage tableofcontents mergetags powerpaste tinymcespellchecker autocorrect a11ychecker typography inlinecss advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount"},


    };
}

How can I make sure that the TinyMCE editor is loaded every time I navigate to this page?

0

There are 0 best solutions below