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

In IE11, the 'Insert Code Snippet' command mixes up HTML, if fire two or more times.

5 Answers 47 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Oleg
Top achievements
Rank 1
Oleg asked on 06 Oct 2014, 09:59 PM

Environment: Internet Explorer 11 (11.0.12) with Document Mode Edge (Default), Telerik UI for ASP.NET AJAX Library Q2 2014 version 2014.2.724

​Steps to reproduce:

1. In Visual Studio, create a new ASP.NET Web Application using the Empty template and the Web Forms as a core reference.
2. Add references to Telerik.Web.UI and Telerik.Web.UI.Skins assemblies.
3. Add the Default.aspx Web Forms item into the root of the project.
4. In Default.aspx page, add the following HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %><br>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<
html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">   
   <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <telerik:RadEditor ID="RadEditor1" runat="server">
      <Snippets>
        <telerik:EditorSnippet Name="2 Column Div Layout">           
          <!-- Row 1 -->
          <div class="row">
           <div class="span7">
             <div class="row">
              <div class="span4">
                <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                </div>
              <div class="span3">
                <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                </div>
             </div>
           </div>
          </div>
          <!-- Pad -->
          <div class="pad15"></div>
          <!-- Row 2 -->
          <div class="row">
           <div class="span7">
             <div class="row">
              <div class="span4">
                <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
              </div>
              <div class="span3">
                <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
              </div>
             </div>
           </div>
          </div>
        </telerik:EditorSnippet>
      </Snippets>
    </telerik:RadEditor>
  </form>
</body>
</html>

5. Build and run the project using IE 11.
6. In the Editor control click the Insert Code Snippet button and select the 2 Column Div Layout code snippet.
7. Switch to the HTML tab and then back to Design one.
8. Click the Insert Code Snippet button and select the 2 Column Div Layout code snippet one more time.

Actual Result:

<!-- Row 1 -->
<div class="row">
<div class="span7">
<div class="row">
<div class="span4">
<p>
<!-- Row 1 -->
<div class="row">
<div class="span7">
<div class="row">
<div class="span4">
</div>
</div>
</div>
</div>
</p>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
<p>
<div class="row">
<div class="span7">
<div class="row">
<div class="span3">
</div>
</div>
</div>
</div>
<!-- Pad -->
<div class="pad15">&nbsp;</div>
<!-- Row 2 -->
<div class="row">
<div class="span7">
<div class="row">
<div class="span4">
</div>
</div>
</div>
</div>
</p>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
<p>
<div class="row">
<div class="span7">
<div class="row">
<div class="span3">
</div>
</div>
</div>
</div>
Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
</div>
<div class="span3">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
</div>
</div>
</div>
</div>
<!-- Pad -->
<div class="pad15">&nbsp;</div>
<!-- Row 2 -->
<div class="row">
<div class="span7">
<div class="row">
<div class="span4">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
</div>
<div class="span3">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
</div>
</div>
</div>
</div>

Expected Result:

<!-- Row 1 -->
<div class="row">
<div class="span7">
<div class="row">
<div class="span4">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
</div>
<div class="span3">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
</div>
</div>
</div>
</div>
<!-- Pad -->
<div class="pad15">&nbsp;</div>
<!-- Row 2 -->
<div class="row">
<div class="span7">
<div class="row">
<div class="span4">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
</div>
<div class="span3">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
</div>
</div>
</div>
</div>
<!-- Row 1 -->
<div class="row">
<div class="span7">
<div class="row">
<div class="span4">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
</div>
<div class="span3">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
</div>
</div>
</div>
</div>
<!-- Pad -->
<div class="pad15">&nbsp;</div>
<!-- Row 2 -->
<div class="row">
<div class="span7">
<div class="row">
<div class="span4">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
</div>
<div class="span3">
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. </p>
</div>
</div>
</div>
</div>

Note:
If you skip step #7 the Actual Result would be different, but still incorrect:
<!-- Row 1 --><br>
<div class="row"><br>
<div class="span7"><br>
<div class="row"><br>
<div class="span4"><br>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
suspendisse ac nec et.</p><br>
</div><br>
<div class="span3"><br>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
suspendisse ac nec et.</p><br>
</div><br>
</div><br>
</div><br>
</div><br>
<!-- Pad --><br>
<div class="pad15">&nbsp;</div><br>
<!-- Row 2 --><br>
<div class="row"><br>
<div class="span7"><br>
<div class="row"><br>
<div class="span4"><br>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
suspendisse ac nec et. </p><br>
</div><br>
<div class="span3"><br>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
suspendisse ac nec et.<br>
<!-- Row 1 --><br>
<div class="row"><br>
<div class="span7"><br>
<div class="row"><br>
<div class="span4"><br>
</div><br>
</div><br>
</div><br>
</div><br>
</p><br>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
suspendisse ac nec et.</p><br>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
suspendisse ac nec et.</p><br>
<p><br>
<div class="row"><br>
<div class="span7"><br>
<div class="row"><br>
<div class="span3"><br>
</div><br>
</div><br>
</div><br>
</div><br>
<!-- Pad --><br>
<div class="pad15">&nbsp;</div><br>
<!-- Row 2 --><br>
<div class="row"><br>
<div class="span7"><br>
<div class="row"><br>
<div class="span4"><br>
</div><br>
</div><br>
</div><br>
</div><br>
</p><br>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
suspendisse ac nec et. </p><br>
<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<br>
suspendisse ac nec et. </p><br>
</div><br>
</div><br>
</div><br>
</div>

5 Answers, 1 is accepted

Sort by
0
Oleg
Top achievements
Rank 1
answered on 06 Oct 2014, 10:09 PM
The issue does not reproduce using Google Chrome 37.0.2062.124 or Mozilla Firefox 32.0.3 on Windows 8.1 Update.
0
Ianko
Telerik team
answered on 09 Oct 2014, 12:41 PM
Hi Oleg,

The described problem is actually reproducible only under IE11 no matter the Windows version.

What happens is that IE11 selects the first paragraph found in the div elements. This appears to be a behavior encountered only with the provided markup example and I am not aware why this behavior is implemented in IE11.

You can workaround this side effect by adding a zero-width space character above the code snippet:
<telerik:RadEditor ID="RadEditor1" runat="server">
    <Snippets>
        <telerik:EditorSnippet Name="2 Column Div Layout">  
            â€‹&#8203;
            <!-- Row 1 -->
            <div class="row">
            <div class="span7">
                <div class="row">
                <div class="span4">
                <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                </div>
                <div class="span3">
                <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                </div>
                </div>
            </div>
            </div>
            <!-- Pad -->
            <div class="pad15"></div>
            <!-- Row 2 -->
            <div class="row">
            <div class="span7">
                <div class="row">
                <div class="span4">
                <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                </div>
                <div class="span3">
                <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
                </div>
                </div>
            </div>
            </div>
        </telerik:EditorSnippet>
    </Snippets>
</telerik:RadEditor>

Due to this character the IE11 succesfully can select the text node above the code snippet when needed. Without trying to find the first nested paragraph.

Regards,
Ianko
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Oleg
Top achievements
Rank 1
answered on 09 Oct 2014, 07:15 PM
Hi Ianko,

Thank you for the update.

The â€‹zero-width space character (&#8203;) does a trick for the main scenario. But, it still mixes HTML if you skip step #7 and insert the ode snippet two time staying in the Design tab.

Do I understand you correctly that this is IE 11 issue rather than Telerik's Editor control?

Best Wishes, Oleg
0
Ianko
Telerik team
answered on 10 Oct 2014, 08:22 AM
Hello Oleg,

I cannot firmly define this behavior as a problem. When it comes to text editing in web environment using DIV and P elements causes some contradictory behavior with HTML editing.

In this case, DIV elements are used as wrappers for the P ones, which is entirely support and available in HTML editing. On other hand, when it comes to text editing, the DIV and P elements are considered as new line separators and since the P is the firmly considered text line, IE11 decides to place the cursor in it in advance.

Due to this behavior, additional content inserted is getting inside this P element. Because of that, the initial HTML content appears incorrect - P elements are nested inside P elements. Thus, the browser detects incompatible HTML and tries to modify it to a more-reliable one.

All these circumstances cause the encountered behavior, and all of them are actually designed to improve editing behavior when editable element is used under IE. Therefore, I am unable to define this as a bug or browser-related issue. It is more a matter that should be taken into account when HTML is automatically inserted in the iframe's editable content.

The main scenario is handled accurately because the snippet enables the IE to be able to select a text element at the begging of the text. Absolutely the same approach will cure the second behavior, because adding a text element at the end, will enable the browser, and the user to place the cursor right after the DIV elements, and respectively after the entire snippet. 

As a result, you can try this snippet and examine if there are any further concerns on the matter:
​​  ​&#8203;
 <!-- Row 1 -->
 <div class="row">
 <div class="span7">
     <div class="row">
     <div class="span4">
     <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
     </div>
     <div class="span3">
     <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
     </div>
     </div>
 </div>
 </div>
 <!-- Pad -->
 <div class="pad15"></div>
 <!-- Row 2 -->
 <div class="row">
 <div class="span7">
     <div class="row">
     <div class="span4">
     <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
     </div>
     <div class="span3">
     <p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et.</p>
     </div>
     </div>
 </div>
 </div>
​​  &#8203;



Regards,
Ianko
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Oleg
Top achievements
Rank 1
answered on 10 Oct 2014, 05:48 PM
Hi Ianko,

Thank you for detailed explanation and the workaround. It works well in IE 11 now.

Best Wishes, Oleg
Tags
Editor
Asked by
Oleg
Top achievements
Rank 1
Answers by
Oleg
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or