Выбор и использование разделов только для чтения в документе HTML с contentEditable

Question

Я хотел бы поэкспериментировать со следующим интерфейсом пользователя:
1. Содержание состоит из кавычек, за которыми следуют комментарии.
2. Комментарии доступны для редактирования, а цитаты - нет. Тем не менее, кавычки должны иметь возможность выделять выделенные части, выделенные жирным шрифтом и т. Д.
3. Весь текст (включая цитаты и комментарии) должен быть выбран и скопирован как богатый текст. Предпочтительно можно было бы удалить выбор, включая любые цитаты внутри него (хотя это может быть интересно, если выбор останавливается в середине цитаты).
4. Предпочтительно выделение функциональных возможностей и т. Д. Должно быть аналогичным для цитат и комментариев (вероятно, панель инструментов с жирными, курсивыми и т. Д. Значками над текстовой областью).

Я пробовал делать это, используя контентный div и окружающие цитаты с contenteditable = false. Пример приведен ниже

<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> 

Однако, я обнаружил, что в то время как Chrome (и, предположительно WebKit) позволяет выбрать текст в только для чтения части contenteditable элемента, Firefox только позволяет лечить contenteditable как один большой блок и выберите его все сразу. Есть ли способ обойти это? Есть ли лучший способ сделать то, что я предлагаю?

Answer 1

Вы можете попробовать это.

<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> 

надеюсь, что это помогло