This is a migrated thread and some comments may be shown as answers.

HTML editor becomes readonly within Tabstrip

3 Answers 369 Views

Editor

This is a migrated thread and some comments may be shown as answers.

lucerias asked on 08 Nov 2016, 02:23 AM

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>

<% });

})

.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

answered on 15 Nov 2016, 03:03 PM

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.