html - 在具有 contentEditable 的 HTML 文档中选择和操作只读部分

Question

我想尝试以下用户界面:
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 视为一个大块并一次选择所有内容。有没有办法解决？有没有更好的方法来执行我的建议？

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>

希望对你有帮助