Best Way To Let Users Enter "Mail Merge Fields" In Editor?

3 posts, 1 answers
  1. Amy
    Amy avatar
    4 posts
    Member since:
    Apr 2006

    Posted 08 Apr 2016 Link to this post

    We are upgrading from version 2011.1.519.35 to 2015.3.1111.35 and are having trouble with changes in how the editor behaves with contenteditable=false.

    We have functionality that lets users add "mail merge fields" to the content in the editor. When they click a button, we use the editor's pasteHtml() function to add an HTML snippet containing information about the "field." Because we don't want the user to change the information within the field, just add or delete it as a single unit, we use contenteditable=false within its tags.

    The problem is that in the 2011 editor, the user could continue typing after we inserted the snippet. But in the 2015 editor, the user's cursor seems to get trapped inside the snippet, and they are unable to continue editing past the snippet.

    Is there a way around this? Or, is there a different way we can implement this kind of functionality that works better with the current editor?

    Below is a sample ASPX page where you can experience the difference between the versions if you compile it against the 2011.1.519.35 assembly vs 2015.3.1111.35. The way to simulate the issue is to:

    1. Run the project to open the page with the editor
    2. Switch the editor to HTML view
    3. Paste the following HTML: Test <span contenteditable=false>uneditable</span>
    4. Switch to Design view
    5. Move your cursor to the end of the content in the editor and try to type some more content

    When using the 2011 editor, you can keep typing, but in the 2015 editor, you can't.

    We're using Internet Explorer. (I'm using version 11, and haven't yet tried other versions.) Our pages have the X-UA-Compatible header set to IE=EmulateIE7, due to having some old code, which changes the editor's behavior a slightly in this example, but even without that header, the fundamental difference between the two versions remains:

    <%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>
    <%@ Import Namespace="System.Diagnostics" %>
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
    <!DOCTYPE html>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
        <h1><%= FileVersionInfo.GetVersionInfo(RadEditor1.GetType().Assembly.Location).FileVersion %> Telerik</h1>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"/>
            <telerik:RadEditor ID="RadEditor1" Runat="server" />


  2. Answer
    Ianko avatar
    1729 posts

    Posted 08 Apr 2016 Link to this post

    Hello Amy,

    The encountered behavior is due to specific requirements related to not editable elements in the content area. As a result, when there is no element after this content, there is nothing that can be selected and typed text in. 

    Therefore, it is suggested, when inserting non-editable elements, an editable one to be appended right lefter it so that end-used can continue typing text.
    Test <span contenteditable=false>uneditable</span><span>&nbsp</span>

    Also, with recent version, you might need to enable Immutable Elements featured:
    <telerik:RadEditor runat="server" EnableImmutableElements="true">
            Test <span contenteditable=false>uneditable</span><span>&nbsp</span>

    This will ensure that custom DOM commands will not edit non-editable areas. 

    On a side note, have in mind the IE7 is not supported anymore—

    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. Amy
    Amy avatar
    4 posts
    Member since:
    Apr 2006

    Posted 08 Apr 2016 in reply to Ianko Link to this post

    Ah, I had thought to try adding &nbsp;, but didn't get the desired behavior. But using <span>&nbsp;</span> gets us what we need.


Back to Top