Prevent Copying P Element Attributes on New Lines?

5 posts, 1 answers
  1. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 03 Dec 2010 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 06 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 06 Dec 2010 Link to this post

    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
  5. Answer
    Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 07 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 07 Dec 2010 Link to this post

    Hi Rumen,

    That works wonderfully. Thanks for your help.

    Jeff
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017