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>
3 Answers, 1 is accepted
0
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
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.
0
lucerias
Top achievements
Rank 1
Rank 1
answered on 14 Nov 2016, 04:04 AM
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.
0
Hi,
You could also use jquery document ready handler to refresh the editor's iframe.
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?
I recommend you to upgrade in case you do not use the latest version of Kendo UI components.
Regards,
Nikolay
Telerik by Progress
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.