Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 24 Feb 2025 12:37 by ADMIN
B
Created on: 23 Jan 2025 15:22
Category: Editor
Type: Bug Report
0
Unexpected New Line Insertion When Pressing Enter After Making Text Bold in Telerik Rad Editor

I am experiencing an issue in the Telerik Rad Editor where, after copying and pasting a long sentence in a single line, if I apply bold formatting to a word and place the cursor at the beginning of the bolded word, pressing Enter results in an empty line being inserted between the text. This behavior is reproducible on the Telerik webforms editor demo site as well.

I would appreciate any guidance on how to resolve this issue. Thanks in advance.

Attached Files:
5 comments
ADMIN
Rumen
Posted on: 24 Feb 2025 12:37

Hi,

I have implemented a fix that resolves the reported side effect when pressing Enter before a formatted word (bold, italic, underline). The adjustment ensures that the cursor moves correctly on a new line and does not alter the text unexpectedly.

That said, please keep in mind that modifying the setCursor method affects many scenarios within RadEditor. Since this function plays a key role in handling cursor placement across different cases, any change might introduce unforeseen side effects in other situations.

If you choose to apply this workaround, I recommend testing it thoroughly to ensure it aligns with your specific needs. Further adjustments may be required depending on your use case.

 

        <script>
            Telerik.Web.UI.Editor.InsertParagraphCommand.prototype.setCursor = function (container, cursor) {
                var command = this,
                    editor = command.get_editor(),
                    utils = Telerik.Web.UI.Editor.Utils,
                    previousElement = utils.getPreviousElement(cursor),
                    nextElement = utils.getNextElement(cursor);

                if ((previousElement && (utils.isTag(previousElement, 'ol') || utils.isTag(previousElement, 'ul')))
                    || (nextElement && (utils.isTag(nextElement, 'ol') || utils.isTag(nextElement, 'ul')))) {
                    utils._setCursorAroundList(cursor, container, editor, command.range);
                } else if (utils.isNodeEmptyRecursive(cursor.parentNode) || utils.isNodeEmptyRecursive(container)) {
                    command.setCursorInNode(cursor);
                } else {
                    var nextSibling = cursor.nextSibling;
                    cursor.parentNode.removeChild(cursor);
                    var range = command.domRange;

                    if (utils.isTextNode(nextSibling) && !utils.isTextNodeEmpty(nextSibling)) {
                        command.setCursorInTextNode(range, nextSibling, 0, 0);
                    } else {
                        if (nextSibling) {
                            if (!utils.canHaveChildren(nextSibling)) {
                                range.setStartBefore(nextSibling);
                            } else {
                                // **MODIFIED SECTION: Handling the bold word case**
                                
                                var tagName = nextSibling.tagName.toLowerCase();

                                // If the next sibling is bold, italic, or underline, move the cursor before it
                                if (["strong", "b", "em", "i", "u"].includes(tagName)) {
                                    range.setStartBefore(nextSibling);
                                } else {
                                    var tracker = editor.nodesTracker;
                                    var trackedNode = tracker.createTrackedNode(editor.get_document());

                                    nextSibling.parentNode.insertBefore(trackedNode, nextSibling);

                                    return tracker.selectTrackedNode(range, trackedNode);
                                }
                            }
                        } else {
                            range.setStart(container, 0);
                        }

                        range.collapse(true);
                        range.select();
                    }
                }
            }
        </script>
        <telerik:RadEditor runat="server" ID="RadEditor1" Height="600px">
            <Content>aaaaa<strong>test</strong>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aa<strong>aaaaaa</strong>aaaa</Content>
            <Modules>
                <telerik:EditorModule Name="RadEditorStatistics" Visible="true" />
                <telerik:EditorModule Name="RadEditorDomInspector" Visible="true" />
                <telerik:EditorModule Name="RadEditorNodeInspector" Visible="false" />
                <telerik:EditorModule Name="RadEditorHtmlInspector" Visible="true" />
            </Modules>
        </telerik:RadEditor>

 

Regards,
Rumen
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

B
Posted on: 21 Feb 2025 07:11

Hi,

Thank you for providing the workaround for the issue. After applying the suggested solution to override the setCursor method in the InsertParagraphCommand, I am now facing a new issue. When typing text in the RadEditor and pressing Enter, the cursor does not immediately move to the next line. It requires pressing Enter twice for the cursor to move.

Could you please assist in resolving this issue.

Thank you

ADMIN
Rumen
Posted on: 28 Jan 2025 19:08

Hi,

After additional research, I'd like to clarify that this is not a real bug but rather a browser behavior. The browser renders the &ZeroWidthSpace; character (used as a special placeholder for cursor positioning in the internal logic of the editor's InsertParagraphCommand) on a new line when the text exceeds the width of the content area.

Please note the following:

  • The &ZeroWidthSpace; character does not get saved into the database.
  • RadEditor automatically removes this special character when submitting content, as well as when switching between the HTML, Design, and Preview modes.

Optional Workaround
If you prefer to avoid this behavior altogether, you can override the internal setCursor method of the InsertParagraphCommand to prevent the &ZeroWidthSpace; from being rendered. Below is an example of how you can achieve this:

        <script>
            Telerik.Web.UI.Editor.InsertParagraphCommand.prototype.setCursor = function (container, cursor) {
                var editor = this.get_editor();
                var nextSibling = cursor.nextSibling;
                
                // Remove the cursor placeholder node
                cursor.parentNode.removeChild(cursor);

                var range = this.domRange;

                // Default: place the cursor at the start of the container or before the next sibling
                range.setStart(container, 0);


                range.collapse(true);
                range.select();
            }
        </script>
        <telerik:RadEditor runat="server" ID="RadEditor1" Height="600px">
            <Content>aaaaa<strong>test</strong>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aa<strong>aaaaaa</strong>aaaa</Content>
            <Modules>
                <telerik:EditorModule Name="RadEditorStatistics" Visible="true" />
                <telerik:EditorModule Name="RadEditorDomInspector" Visible="true" />
                <telerik:EditorModule Name="RadEditorNodeInspector" Visible="false" />
                <telerik:EditorModule Name="RadEditorHtmlInspector" Visible="true" />
            </Modules>
        </telerik:RadEditor>
I hope this addresses your concern effectively.

 

 

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources! 
B
Posted on: 28 Jan 2025 10:21

Thank you for your response, Rumen. This issue was raised by one of our customers, and resolving it is quite important for them. Would it be possible to provide an estimated timeline for when we might expect a fix or any further updates on this?

Thank you again for your support.

ADMIN
Rumen
Posted on: 23 Jan 2025 16:26

Thank you for bringing this issue to our attention! I have converted your forum post into a bug report for our team to investigate further.

At the moment, there is no available workaround for this scenario. However, it’s worth noting that using such a long content to edit is not a very common approach, which may explain why this issue hasn’t surfaced before.

As a token of our appreciation for your valuable feedback, I’ve credited your account with 1,000 Telerik points. Thank you for helping us improve our products!

 

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources! 
Create an account Log In
View
Type
Status
Category