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:
- Run the project to open the page with the editor
- Switch the editor to HTML view
- Paste the following HTML: Test <span contenteditable=false>uneditable</span>
- Switch to Design view
- 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><html><head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"></head><body> <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" /> </form></body></html>
2 Answers, 1 is accepted
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> </span>Also, with recent version, you might need to enable Immutable Elements featured:
<telerik:RadEditor runat="server" EnableImmutableElements="true"> <Content> Test <span contenteditable=false>uneditable</span><span> </span> </Content></telerik:RadEditor>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—http://www.telerik.com/aspnet-ajax/tech-sheets/browser-support.
Regards,
Ianko
Telerik
Rank 1
Ah, I had thought to try adding , but didn't get the desired behavior. But using <span> </span> gets us what we need.
Thanks!