How to hide textarea with html tags until Editor is loaded?

[Enek]

Users can see textarea with html tags while Editor is loading.

<div class="form-group">
    <label asp-for="Description" class="col-md-2 control-label"></label>
    <div class="col-md-6">
        @(Html.Kendo().EditorFor(model => model.Description)
          .HtmlAttributes(new { style = "width: 100%;height:440px;" })
          .Tools(tools => tools
              .Clear()
              .Bold().Italic().Underline().Strikethrough()
              .InsertUnorderedList().InsertOrderedList()
              .Formatting()))
        <span asp-validation-for="Description" class="text-danger"></span>
    </div>
</div>

 

Is there a way to hide the textarea until Editor is loaded?

Thank you

[Rumen]

Hello ,

You can wrap the Kendo Editor in a hidden div and show the div when the page loads:

<div id="hiddenDivWrapper" style="display:none;">
    @(Html.Kendo().Editor()
      .Name("editor")
      .HtmlAttributes(new { style = "height:350px" })
      .Resizable(resizable => resizable.Content(false).Toolbar(true))
      .Events(events => events
          .Change("change")
          .Execute("execute")
          .Select("select")
          .Paste("paste")
          .KeyUp("updateCount")
       )
      .Value(@<text>
        <p>
            <img src="@Url.Content("~/content/web/editor/kendo-ui-web.png")" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
        </p>
        <p>
            Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
            In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
            and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
            accessibility standards and provides API for content manipulation.
        </p>
        <p>Features include:</p>
        <ul>
            <li>Text formatting & alignment</li>
            <li>Bulleted and numbered lists</li>
            <li>Hyperlink and image dialogs</li>
            <li>Cross-browser support</li>
            <li>Identical HTML output across browsers</li>
            <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
        </ul>
        <p>
            Read <a href="http://docs.telerik.com/kendo-ui">more details</a> or send us your
            <a href="http://www.telerik.com/forums">feedback</a>!
        </p>
    </text>)
    )
</div>
<script>
    $(document).ready(function () {
        setTimeout(function () {
            $("#hiddenDivWrapper").css("display", "block");
        }, 1000);
    })
</script>

Regards,
Rumen
Telerik by Progress