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

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

4 голосов
/ 20 февраля 2010

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

Я попытался сделать это, используя contenteditable 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 только как один большой блок и выделять все сразу. Есть ли способ обойти это? Есть ли лучший способ сделать то, что я предлагаю?

1 Ответ

0 голосов
/ 06 февраля 2013

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

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

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

...