NewLine formatting issue

[Fit2Page]

Hi,

 

When 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>

Of course this would only happen when NewLineMode is in default (paragraph) position

Any thoughts?

Marc

[Rumen]

Hi Marc,

Please excuse us for the inconvenience this behavior is causing!

This is a known side effect of the NewLineMode="P" functionality and you can vote for its improvement at https://feedback.telerik.com/aspnet-ajax/1377072-new-post-in-insertparagraph-inserts-div-tag-when-newlinemode-div-and-should-insert-p-tag. 

Best regards,
Rumen
Progress Telerik

[Fit2Page]

Hi Rumen,

 

Thanks for looking into this issue.

 

I did some more testing and found some other issues:

When setting NewLineMode to Br, here is stated:

 

https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/control-new-line-behavior

That Ctrl+M would insert a new paragraph which it doesn't.

Furthermore when I am in a DIV then the DIV is splitted up, where I would expect that it just would insert the BR tags in the DIV's content.

BR, Marc

[Fit2Page]

Sorry for not being clear on the last issue:

Furthermore when I am in a DIV then the DIV is splitted up, where I
would expect that it just would insert the P tag in the DIV's content.

 

This happens when I use the Insert Paragraph button when in NewLineMode = Br

Marc

[Rumen]

Hello Marc,

Here is an example of how to customize the built-in behavior of the InsertParagraph command, e.g. when the cursor inside a div and the InsertParagraph button is pressed, a paragraph will be inserted 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

[Fit2Page]

Thank you Rumen, this is very helpful.

 

Marc

[Rumen]

You are welcome, Marc!

For reference I also copied the solution in the bug report item, since it might be useful to somebody else:

New post in InsertParagraph inserts div tag when NewLineMode=DIV and should insert p tag.

Regards,
Rumen
Progress Telerik