Prevent Copying P Element Attributes on New Lines?

[Jeff]

Good morning,

If I apply a class to a P element, when I hit enter to start a new paragraph, the same class is applied to the next paragraph.

For example:

<!-- I added this class -->
<p class="first_p_only">Only the first paragraph should be styled.</p>
<!-- Editor adds this class to all subsequent paragraphs -->
<p class="first_p_only">This paragraph should be style free.</p>
<p class="first_p_only">Also supposed to be style free.</p>

This mimics the behavior in Dreamweaver, which I always despised. If you need to apply a class to every p element, you should really define the style in the containing element.

Is there a way to disable this behavior? Or, failing that, a way to define a filter to remove it after Editor adds it?

Thanks,
Jeff

[Rumen]

Hello Jeff,

This is a browser behavior. Here is an example on how to achieve the desired Enter key behavior when NewLineBr is set to false in RadEditor:

<script type="text/javascript">
    function OnClientLoad(editor, args) {
        editor.attachEventHandler("keydown", function (e) {
            if ($telerik.isIE && e.keyCode == "13") {
                setTimeout(function () {
                    var parent = editor.getSelection().getParentElement();
                    editor.selectElement(parent);

                    if (parent && parent.tagName == "P") {
                        parent.className = "";
                    }
                }, 0);
            }
        });
    }
    function OnClientCommandExecuted(editor, args) {
        var command = args.get_commandName();
        //alert(command);
        if (command == "EnterParagraphMozilla") {
            var parent = editor.getSelection().getParentElement();
            if (parent && parent.tagName == "P") {
                parent.className = "";
            }
        }
    }
</script>
<telerik:RadEditor runat="server"  OnClientCommandExecuted="OnClientCommandExecuted" OnClientLoad="OnClientLoad" NewLineBr="false"
    ImageManager-ViewPaths="~/Images" ImageManager-UploadPaths="~/Images" ID="RadEditor1">
    <Content>
        <p class="first_p_only">Only the first paragraph should be styled.</p>
    </Content>
</telerik:RadEditor>

The code for IE introduces a side effect: the cursor is not visible after pressing the Enter key, but if you type a single letter or word it will appears right away. I was unable to find a solution or hack for this browser behavior.

Kind regards,
Rumen
the Telerik team

[Jeff]

Hi Rumen,

This works well in Firefox. In IE, the editor.selectElement(parent); line causes more problems than it solves. It works acceptably without the selectElement command (though not perfectly).

When selectElement is present and the cursor is on the last line in the editor, the cursor disappears as you noted. However, if you hit Enter in the middle of several paragraphs, odd things happen:

1. If you hit Enter at the end of the line, a new line is created with a single, highlighted space character. When you begin to type the line below it jumps up to the newly created line.
2. If you hit Enter in the middle of a line, the remainder of the line is highlighted on a new line. If you type anything, that line newly created line is deleted.

Without the selectElement method, the code works flawlessly behind the scenes. The class is removed and there are no cursor or selection anomalies.

However, the CSS Class dropdown isn't updated, so it looks like the previous line's class is still applied to the line. If you move off the line and back on to it, the dropdown correctly shows "Apply CSS..."

If there is a way to force the CSS Class dropdown to update, this would work perfectly in IE.

Thanks for your help.

Jeff

[Rumen]

Hello Jeff,

You can easily update the "Apply Class" header value using

editor.getToolByName("ApplyClass").set_value("Apply Css Class");

Here is the complete solution:

<script type="text/javascript">
    function OnClientLoad(editor, args) {
        editor.attachEventHandler("keydown", function (e) {
            if ($telerik.isIE && e.keyCode == "13") {
                setTimeout(function () {
                    var parent = editor.getSelection().getParentElement();

                    if (parent && parent.tagName == "P") {
                        parent.className = "";
                        editor.getToolByName("ApplyClass").set_value("Normal");
                    }
                }, 0);
            }
        });
    }
    function OnClientCommandExecuted(editor, args) {
        var command = args.get_commandName();
        if (command == "EnterParagraphMozilla") {
            var parent = editor.getSelection().getParentElement();
            if (parent && parent.tagName == "P") {
                parent.className = "";
            }
        }
    }
</script>
<telerik:RadEditor runat="server"  OnClientCommandExecuted="OnClientCommandExecuted" OnClientLoad="OnClientLoad" NewLineBr="false"
    ImageManager-ViewPaths="~/Images" ImageManager-UploadPaths="~/Images" ID="RadEditor1">
    <Content>
        <p class="first_p_only">Only the first paragraph should be styled.</p>
    </Content>
</telerik:RadEditor>

Regards,
Rumen
the Telerik team

[Jeff]

Hi Rumen,

That works wonderfully. Thanks for your help.

Jeff

[Shaun]

Old question, but for anyone else seeing this NewLineBr is now deprecated and I found that setting the NewLineMode property to "Br" avoids this issue without any hacks or cross browser issues, naturally it does cause the enter key to add a <br /> tag instead of a paragraph however.