Hello,
I am using a RadEditor to allow the user to create a page, with some placeholders present for later substitution for real data.  For example, the user could be allowed to insert via a custom tool, a place holder for their project name, like so:

Project Name: [[ProjectName]]

In this example, the "[[ProjectName]]" is a placeholder for the project name data field that will be filled in with real data at a later time.  When the user inserts a placeholder, I am pasting html for a <table> tag into the editor content area, with the "[[ProjectName]]" text in the single cell of this table.  I would like the text content uneditable, so that the user cannot change or delete this text.  However, I would like to allow the user to change the font, size, and font style of the text.  This would allow the processor that completes the page to know what font, size, and style with which to fill in the real project name.

I have tried various combinations of the "contenteditable" and "unselectable" style attributes to no avail.  It seems that whenever I succeed in making the text uneditable, it also does not allow the font to be changed.

Maybe smarter heads can prevail?  Thanks for any help you can give.

Update: I forgot to mention, I am using Telerik RadControls for ASP.NET AJAX Q1 2011 SP1, and Visual Studio 2008, and .NET Framework 3.5.

Regards,
Steve Harding

Anybody?

Hello Steve,

You can try to implement your scenario using the OnClientSelectionChange event which is fired when clicking in the content area. Using the editor.getSelection().getParentElement() method you can inspect the currently selected element and according to its properties ID, attributes to enable or disable toolbar buttons.



Best wishes,
Rumen
the Telerik team

Thanks for the reply.  I had not thought of this approach before.  I will try it within the next week or so as I wrap up some other aspects of my project.  Thanks again!

Steve

I am still working on this issue, and I am getting closer to the behavior I want, but I need some further assistance.

My current solution is to use css classes that contain a "content" attribute.  For example, in my custom EditorContentArea.css file, I have the following:

.SubmittalField7:before

{

 

    content:"[[Section Notes";

 

}

When the user inserts a "section notes" placeholder from the custom tool, the html that is pasted into the editor's content area consists of:

<table title="SubmittalField$7" style="display: inline; vertical-align: middle;">
    <tbody>
        <tr>
            <td title="SubmittalField$7"><span title="SubmittalField$7" class="SubmittalField7">]]</span></td>
        </tr>
    </tbody>
</table>

This presents "[[Section Notes]]" into the content area, where "[[Section Notes" is part of the style and "]]" is the actual text within the span, within the td.  I had to do it this way so that when the user clicked in the span, it would visually select the entire span.  If there was no text, then the span was not visually selected.  I am using this css style so that the user cannot edit or delete the words "Section Notes".

In any case, I have the following client-side function, similar to what you suggested previously:

For the most part, this works fairly well.  When the user clicks anywhere on "[[Section Notes]]", it selects the entire span.  Because it is a <span> that is selected, all of the tools I wish to be enabled are correctly enabled (specifically, Bold, Italic, Underline, StrikeThrough, ForeColor, BackColor, FontName and RealFontSize).

The problem, however, is if I attempt to change the font, size, color, etc., it only visually changes the "]]", instead of changing the entire "[[Section Notes]]".  If I flip over to HTML mode and then back to Design mode, then it fixes the problem and the entire "[[Section Notes]]" appears correctly.

Can you tell me what is happening when I flip to HTML mode and back, and also suggest what I can do to force the same code to be executed?

Thanks.

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.

Hi Steve,

I was able to eliminate the problem in Firefox by selecting the text and disabling the content area after a small interval of time:



Best regards,
Rumen
the Telerik team

Rumen,
Thanks for your reply.

I tried your suggestion, and indeed, it works on both IE and Firefox, to select and disable the <span>.  However, on Firefox, it no longer applies the attributes when the user selects bold, italic, forecolor, backcolor, etc.  I don't understand why not.

In any case, I recently found a solution that does work, although it looks like it shouldn't work.  See my changes to the function below:


This statement:

looks as if it should not disable the editor on Firefox when the span is selected.  But for some reason, this works on both Firefox and IE.  I don't understand it, but it works, so I'm leaving it in.  Any comments why this would work?

Thanks.