NewLineMode question

1 Answer 15 Views
Editor
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Fit2Page asked on 20 Mar 2024, 07:45 AM

Hi,

 

Experimenting with RadEditor's NewLineMode we find that mode "P" (default) is acting weird when I press Enter when positioned in a DIV.

A new DIV is created then. A very undesirable result, why not simply create a new <p> inside the DIV?

Marc

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 20 Mar 2024, 09:35 AM

Hi Marc,

I want to propose a code solution for the reported case:

        <script type="text/javascript">
            function OnClientCommandExecuting(sender, args) {
                if (args.get_commandName() === "EnterNewLine") {
                    var editor = sender;
                    var selection = editor.getSelection();
                    var parentElement = selection.getParentElement();

                    // Check if the selection's parent element is a DIV
                    if (parentElement && parentElement.tagName.toLowerCase() === "div") {
                        // Prevent the default Enter key behavior only if inside a DIV
                        args.set_cancel(true);

                        // Insert a paragraph with a uniquely identifiable span (marker) for cursor placement
                        var uniqueMarker = '<p><span id="cursorPlaceholder">&#8203;</span></p>';
                        editor.pasteHtml(uniqueMarker);

                        setTimeout(function () {
                            var doc = editor.get_document();
                            var placeholder = doc.getElementById("cursorPlaceholder");
                            if (placeholder) {
                                if (editor.selectElement) {
                                    editor.selectElement(placeholder);
                                }

                                // Remove or replace the placeholder to leave the cursor in place
                                placeholder.outerHTML = "&#8203;"; // Replaces the placeholder with a zero-width space
                            }
                        }, 0); // Short delay to ensure DOM updates
                    }
                    // If not inside a DIV, the default behavior will occur automatically since args.set_cancel(true) is not called
                }
            }
        </script>
        <telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting"
            NewLineMode="P">
            <Content>
                <p>para</p>
                <div>longtext</div>
                <p>para</p>
            </Content>
        </telerik:RadEditor>

 

    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
    Fit2Page
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    commented on 21 Mar 2024, 07:50 AM | edited

    Hi Rumen,

     

    Many thanks for your swift response.

    We tested your snippet and this works out very well.

    Is this a custom one, or something to implement in future versions?

     

    Thanks again,
    Marc

    Rumen
    Telerik team
    commented on 21 Mar 2024, 08:12 AM

    I'm glad to hear the solution met your expectations, Marc! To integrate this into the source code, I suggest logging it as an enhancement (bug report) or feature request. Please note, this change could significantly alter the current behavior, which might be suitable for some customers but not for others. It's an important consideration as we aim to maintain a balance that benefits the majority of our users.

    Thank you! Have a good day!

    Tags
    Editor
    Asked by
    Fit2Page
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    Answers by
    Rumen
    Telerik team
    Share this question
    or