HTML editor becomes readonly within Tabstrip

4 posts, 0 answers
  1. lucerias
    lucerias avatar
    16 posts
    Member since:
    Nov 2011

    Posted 07 Nov Link to this post

    Hi,

     

    I have one HTML editor, it becomes readonly when it is within Tabstrip. I have performed another experiment, just HTML editor within DIV without Tabstrip, everything is work as per normal.

     

    I have made a comparison between them and found out it seem contenteditable="true" is missing in the body when it is placed within Tabstrip, may i know why and any to fix this? Comparison and implementation details are as below. Thanks.

     

    HTML editor within Tabstrip

    <html>
    <head></head>
    <body></body>
    </html>

     

    HTML editor outside Tabstrip

    <html>
    <head><meta charset="utf-8"><style>html,body{padding:0;margin:0;height:100%;min-height:100%;}body{font-size:12px;font-family:Verdana,Geneva,sans-serif;margin-top:-1px;padding:1px .2em 0;word-wrap: break-word;-webkit-nbsp-mode: space;-webkit-line-break: after-white-space;}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em}h3{font-size:1.16em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.7em}p{margin:0 0 1em;}.k-marker{display:none;}.k-paste-container,.Apple-style-span{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}ul,ol{padding-left:2.5em}span{-ms-high-contrast-adjust:none;}a{color:#00a}code{font-size:1.23em}telerik\3Ascript{display: none;}.k-table{table-layout:fixed;width:100%;border-spacing:0;margin: 0 0 1em;}.k-table td{min-width:1px;padding:.2em .3em;}.k-table,.k-table td{outline:0;border: 1px dotted #ccc;}.k-table p{margin:0;padding:0;}k\:script{display:none;}</style><script>(function(d,c){d[c]('header'),d[c]('article'),d[c]('nav'),d[c]('section'),d[c]('footer');})(document, 'createElement');</script></head>
    <body autocorrect="off" contenteditable="true"></body>
    </html>

     

    Code

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
     
        <div>
     
            <% Html.Kendo().TabStrip()
                  .Name("tabstrip")
                  .Animation(animation =>
                      animation.Open(effect =>
                          effect.Fade(FadeDirection.In)))
                  .Items(tabstrip =>
                  {
                      tabstrip.Add().Text("Main")
                          .Selected(true)
                          .Content(() =>
                          { %>
     
                          <%--This editor is not editable--%>
                            <div class="row-fluid">
                                <div class="span12">
                                    <label><%: Html.DisplayNameFor(model => model.Description) %>:</label>
                                    <%:
                                        Html.Kendo().EditorFor(model => model.Description)
                                            .Name("Description")
                                            .Encode(false)
                                            .Tools(tools => tools.Clear()
                                            .Bold()
                                            .FontColor().BackColor()
                                            .InsertUnorderedList().InsertOrderedList()
                                            .Outdent().Indent())
                                    %>
                                    <%: Html.ValidationMessageFor(model => model.Description)%>
                                </div>
                            </div>
     
     
                          <% });
                                                
                  })
                  .Render();
            %>
             
            <%--This editor is work as normal--%>
            <label class="info-title"><%: Html.DisplayNameFor(model => model.Description) %>:</label>
            <%:
                Html.Kendo().EditorFor(model => model.Description)
                    .Name("Description")                                     
                    .Encode(false)
                    .Tools(tools => tools.Clear()
                    .Bold()
                    .FontColor().BackColor()
                    .InsertUnorderedList().InsertOrderedList()
                    .Outdent().Indent())
            %>     
             
        </div>
         
    </asp:Content

     

  2. Nikolay
    Admin
    Nikolay avatar
    64 posts

    Posted 09 Nov Link to this post

    Hi,

    This issue happens when the editor's content editable element is iframe and is moved in the DOM.

    To resolve it, you could handle TabStrip activate event and call editor refresh method which will reinitializes the iframe.

    Regards,
    Nikolay
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. lucerias
    lucerias avatar
    16 posts
    Member since:
    Nov 2011

    Posted 13 Nov in reply to Nikolay Link to this post

    Hi,

    I have included onactivate event and try to refresh kendo editor under onactivate event. However, it is not triggered because i only have tab defined and set .Selected(true) for the tab using inline code, what is the proper way to fix this.

    Thanks.

  5. Nikolay
    Admin
    Nikolay avatar
    64 posts

    Posted 15 Nov Link to this post

    Hi,

    You could also use jquery document ready handler to refresh the editor's iframe.
    <script>
        $(document).ready(function () {
            $("[data-role='editor']").each(function () {
                $(this).getKendoEditor().refresh();
            });
        });
    </script>

    I have tried to reproduce the issue but no avail. Here is the code that I used. Are there any errors in the browser console on your side?
    <div>
        @(Html.Kendo().TabStrip()
              .Name("tabstrip")
                     .Animation(animation =>
                        animation.Open(effect =>
                            effect.Fade(FadeDirection.In)))
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("Paris")
                      .Selected(true)
                      .Content(@<text>
                        @(Html.Kendo().EditorFor(m=>m.ProductName)
                            .Encode(false)
                            .Tools(tools => tools.Clear()
                            .Bold()
                            .FontColor().BackColor()
                            .InsertUnorderedList().InsertOrderedList()
                            .Outdent().Indent())
                        )
                    </text>);
              })
        )
    </div>

    I recommend you to upgrade in case you do not use the latest version of Kendo UI components.

    Regards,
    Nikolay
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready