Approved
Last Updated: 06 May 2019 12:26 by ADMIN
Dennis
Created on: 07 Oct 2016 15:38
Category: Editor
Type: Bug Report
1
New post in InsertParagraph inserts div tag when NewLineMode=DIV and should insert p tag
Problem:

In the RadEditor we have the NewLineMode set to Div
We are also using a ToolsFile xml document to control the tools available in RadEditor.
The problem is the InsertParagraph tool now inserts <div> tags instead of <p> tags.
We want to keep the NewLineMode behavior as DIV while still having a tool that can insert a paragraph (i.e. a <p> tag).

To replicate this problem:

On the RadEditor demo page, first set "NEW LINES AS" to "Divs".
Then, in the editor content area just above the "Destinations" table, Type in three lines:
Comment1
Comment2
Comment3

If you then toggle to the HTML tab, you will see that the Comment1 line is (incorrectly) bracketed by a <p> tag while the Comment2 and Comment3 lines are (correctly) bracketed by <div> tags.

Next, go back to the Design tab and position yourself at the beginning of the Comment3 line then click the [Insert Paragraph] button.

In the newly inserted "paragraph" type "Comment2b".

If you then toggle to the HTML tab you will see that Comment2b is incorrectly bracketed by a <div> tag.  It should be a <p> tag.

3 comments
ADMIN
Rumen
Posted on: 06 May 2019 12:26
Wanted to share the solution provided in this forum thread https://www.telerik.com/forums/newline-formatting-issue, which shows how to customize the InsertParagraph command and insert a paragraph in the DIV:


<script type="text/javascript">
function OnClientCommandExecuting(editor, args)
{
    if("InsertParagraph" == args.get_commandName())
    {
        editor.pasteHtml('<p> <span id="_reSelectionMarker"></p>');
  
        var marker = editor.findContent("#_reSelectionMarker").get(0); //get the marker
  
        var range = editor.getDomRange();
        range.selectNodeContents(marker);//Select the entire contents of the element with the range
        range.collapse(false);//false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
        marker.parentNode.removeChild(marker); //remove the marker
        args.set_cancel(true);
    }
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1" NewLineMode="P" OnClientCommandExecuting="OnClientCommandExecuting">
    <Content>
        <div>test</div>
    </Content>
</telerik:radeditor>


Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
ADMIN
Rumen
Posted on: 30 Apr 2019 09:17
Hi Marc,

Thank you for reporting this issue. I approved it as a valid one and it will be taken into account once we start working on it.

In the meantime there is a way to insert a paragraph which your users may use to avoid the problem. It is to firstly press Enter before typing bbbbb and ccccc as shown in the video https://www.youtube.com/watch?v=Wjqt4MMPh-w&feature=youtu.be&hd=1.

Best regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Fit2Page
Posted on: 23 Apr 2019 11:07

When NewLineMode is in default (paragraph) position and I have content in the editor like:

 

<div class="container">
<div class="row">
aaaaa
</div>
</div>

Adding " bbbb cccc" in Design mode and give Enter after aaaa would result in the following HTML:

<div class="container">
<div class="row">
aaaaa </div>
<div class="row">
bbbb ccccc
</div>
</div>

So the div tag is splitted up. We think it would be logical to do the split and add a <p> tag around the content of the new div so the text paddings are right like so:

 

<div class="container">
<div class="row">
aaaaa </div>
<div class="row">
<p>bbbb ccccc</p>
</div>
</div>