Okay, I have tried several different approaches, and nothing worked very well. Eventually, I stumbled upon this forum post:
http://www.telerik.com/community/forums/aspnet-ajax/editor/non-editable-areas-in-firefox.aspx
I decided to give this a try, and it works very well in Internet Explorer, but not well at all in FireFox. Here is my client-side code:
Recall that when the user selects one of our field placeholders, the following HTML (for example) is pasted into the editor's content area:
<table style="display: inline; vertical-align: middle;">
<tbody>
<tr>
<td><span title="SubmittalField$7">[[Section Notes]]</span></td>
</tr>
</tbody>
</table>
I am no longer using CSS classes in my solution. Also, due to the bold and italic tools, it is possible for the <span> tag to contain <strong> or <em> tags within. This is why I am looking for the parent <span> tag that has a title starting with "SubmittalField$".
This solution works great in IE. Whenever the user clicks on any of the text within the <span>, the entire text is selected, keystrokes are disallowed, and yet the user can still click on the bold, italic, underline, forecolor, backcolor, fontname, and font size tools to select those attributes for the text within the span.
HOWEVER, this solution does not work within FireFox. In FF, when the user clicks on any of the text within the <span>, you see the entire text briefly selected, and then the I-beam cursor is immediately placed at the beginning of the content area, effectively unselecting what I want selected. If I debug the client-side using Firebug and place a breakpoint within the
EnableDisableEditing function and step through line by line, then it
does work. By trial and error, I have determined that if you break anywhere before the call to
editor.set_editable(false), and step through, then it works. If you let
editor.set_editable(false) get executed before breaking, then it does
not work.
Can anybody shed some light on what is happening here in Firefox?
Thanks for any help.