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

The 'Insert Code Snippet' command mixes up an HTML, if <p> element is placed above

1 Answer 109 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Oleg
Top achievements
Rank 1
Oleg asked on 15 Oct 2014, 11:03 PM
Environment: Telerik UI for ASP.NET AJAX Library Q2 2014 version 2014.2.724, Internet Explorer 11 or FireFox 32, Chrome 38.

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" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html>
 
<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 Internet Explorer 11 or Firefox 32 or Chrome 38.
6. In the Design tab, click the Entre key. The <p>&nbsp;</p> <p>&nbsp;</p> HTML is inserted.
7. In the Design tab, click the Insert Code Snippet button and select the 2 Column Div Layout code snippet.
8. Switch to the HTML tab to see the HTML.

Actual Result:
The code snipped is inserted inside the second <p> element. As a result, the code snippet HTML is changed.

<p> </p>
<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"> </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>


Expected Result:
The code snipped must be inserted after the <p>&nbsp;</p> <p>&nbsp;</p> HTML without any changes.

<p> </p>
<p> </p>
<!-- 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>






1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 17 Oct 2014, 03:55 PM

Hi,

Thank you for the detailed description.

I have investigated the issue and found out that it is caused by RadEditor's functionality which should fix the nested paragraphs.

There are a few ways to prevent this behavior.

  • Make sure that the EditorSnippet (which contains paragraphs) is not inserted into another paragraph. This can be achieved by using NewLineMode Div instead of P so the RadEditor will not generate paragraphs.
  • Replace the paragraphs with DIV elements in the EditorSnippet.
  • Disable this functionality by using the following code snippet:
<telerik:RadEditor ID="RadEditor1" runat="server">
    <Snippets>
        <telerik:EditorSnippet Name="2 Column Div Layout">          
            <!-- Row 1 -->
            ....
        </telerik:EditorSnippet>
    </Snippets>
</telerik:RadEditor>
 
<script type="text/javascript">
    Telerik.Web.UI.Editor.NestedElementsFix.prototype.applyFix = function () { }
</script>

Here is the feedback item, where you can track the issue's status and vote for it.

I hope this helps.

Regards,
Nikolay
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.

 
Tags
Editor
Asked by
Oleg
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or