Selecting and managing read-only sections in an HTML document using contentEditable

Question

I would like to experiment with the following user interface:
1. Content consists of quotation marks, followed by comments.
2. Comments are editable, but citations are not. However, citations should be able to highlight parts of the quotation in bold, etc.
3. All text (including quotes and comments) should be selected and copied as rich text. Preferably, the selection could be removed, including any quotes within it (although this may be interesting if the selection stops in the middle of the quote).
4. It is preferable to highlight functionality, etc. Should be similar for quotes and comments (probably a toolbar with bold, italics, etc. Above the text area).

I tried to do this using a contenteditable div and surrounding quotes with the element contenteditable = false. Example below

<div id="editor" contenteditable="true" style="height:200px; border:1px solid black"> This is some editable content. <p><div contenteditable="false">This content should not be editable <i contenteditable="true">(but this is)</i>. </div></p> </div> 

However, I found that although Chrome (and presumably WebKit) allows you to select the text in the read-only part contained in the content, Firefox allows you to view the content as just one large block and at the same time select it. Is there any way around this? Is there a better way to do what I suggest?

Answer 1

You can try this.

 <div id="editor" style="height:200px; border:1px solid black"> <p contenteditable="true">This is some editable content.<p> <div> <p>This content should not be editable <i contenteditable="true">(but this is)</i>. </p></div> </div> 

hope this helped