I'm looking for some help in making objects within the editor non-editable. 

I've got a custom button on the toolbar that inserts a DIV object into the editor text.  This DIV is merely a placeholder within the editor and will be the target of later processing (outside of the editor).  I'd like to allow sizing of this DIV, but not editing. 

 

I've had partial success by using ContentEditable attribute.  By setting this attribute false, it prevents editing within the DIV, but it still shows the text-entry border (thick hatched border) clicked while active.  Worse, if I include any container tags within the DIV, any click will show the text-entry border.  When this border is displayed, any insert from the toolbar goes into my placeholder object rather than on the page.

 

Do you know of any way I can prevent ALL editing of a single object within the editor?

 

To reproduce the behavior, paste the following as HTML into the editor then see what happens when you click twice on the object.

    <DIV contentEditable=false>Placeholder Object</DIV>

 

Alternatively, paste this snippet into the editor as HTML and click (just once) on the words:

    <DIV contentEditable=false><b>Placeholder Object</b></DIV>

 

 

try the following solution:

 

<DIV contentEditable=false UNSELECTABLE="ON">Placeholder Object</DIV>

 

Adding the UNSELECTABLE attribute makes it so you can't select the object at all, which also means you can't size the object.  What I'd like to have is the content within the object unselectable, and the object itself not editable.  That is, sizing handles on the object itself, but nothing else.

OK.  I think I got it sorted out. 

 

You need the UNSELECTABLE attribute on every element inside the containing object, and CONTENTEDITABLE="false" set on the outside container, plus you have to trap the onmousedown event of the outside element and force the editor to control select the object.

 

The following code works alright, but I'd be interested in suggestions.

 

<div id="outerObj" CONTENTEDITABLE="false" onmousedown="selectObject('YourEditorID', this);">
    <div UNSELECTABLE="ON">Some text</div>
</div>
<script language="javascript">
function selectObject(editorID, oObj)
{
   var editor = document.getElementById(editorID);

   var r = editor.document.body.createControlRange();

    r.add(oObj);

    r.select();

}

</script>