使用 contentEditable 选择和操作 HTML 文档中的只读部分

发布于 2024-08-23 01:35:46 字数 771 浏览 7 评论 0原文

我想尝试以下用户界面：
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 视为一个大块并一次选择它。有什么办法解决这个问题吗？有没有更好的方法来完成我的建议？

原文

I would like to experiment with the following user interface:
1. The content consists of quotes followed by comments.
2. The comments are editable, while the quotes are not. However, quotes should be able to have parts of the quote highlighted, bolded, etc.
3. The entire text (including quotations and comments) should be able to be selected and copied out as rich text. Preferably it would be possible to delete the selection including any quotations within it (though that might be interesting if the selection stops in the middle of a quotation).
4. Preferably highlighting functionality, etc. should be similar for the quotations and for the comments (probably a toolbar with bold, italic, etc. icons above the text area).

I tried doing this using a contenteditable div and surrounding quotations with a contenteditable=false element. An example is 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 discovered that while Chrome (and so presumably WebKit) allows you to select text within a readonly part of the contenteditable element, Firefox only allows you to treat the contenteditable as one big block and select it all at once. Is there any way around this? Is there a better way to do what I am suggesting?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

给不了的爱 2024-08-30 01:35:46

你可以试试这个。

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

希望这有帮助

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

回复收藏 0 原文

~没有更多了~