contentEditable, CTRL-B CTRL-I 和保存答案

【问题标题】：contentEditable, CTRL-B CTRL-I and savingcontentEditable, CTRL-B CTRL-I 和保存
【发布时间】：2022-03-08 20:45:33
【问题描述】：

我刚刚开始使用 contentEditable，还没有找到太多全面的信息。

我注意到在 Chrome 中，我可以通过按 CTRL-B 和 CTRL-I.

这可能是其他浏览器的预期行为吗？例如，这适用于 Chrome：

<div class="container" id="typer" onclick="this.contentEditable='true';">

我想知道我是否可以阅读此格式以保存用户的编辑？另外，我可以创建一个粗体按钮和斜体按钮来触发 CTRL-B 和 CTRL-I 吗？或者我是否需要依赖用户按下 CTRL-B 和 CTRL-I （这意味着提供它们一张纸条告诉他们）？

【问题讨论】：

【解决方案1】：

这是所有主流浏览器的标准。在所有主要浏览器中，还可以通过document.execCommand() 获得键盘快捷键的编程等效项，尽管在 2022 年这似乎即将淘汰。现在，例如，粗体和斜体命令可以执行如下：

document.execCommand("Bold", false, null);
document.execCommand("Italic", false, null);

但是，生成的标记因浏览器而异。例如，粗体的变体包括foo、foo 和foo。

参考资料：

【讨论】：

谢谢，这很有帮助。但是你知道为什么这个例子 (jsfiddle.net/uk6DA/15) 在 IE9 中不起作用吗？至少 ctrl-B 和 ctrl-I 不是。 execCommands 会起作用吗？
没关系。我自己的页面有效。 JSFiddle 页面由于某种原因没有。
@Dave：是的，我认为这是一个 JSFiddle 问题。
在 Firefox（v76，Linux）中似乎不起作用。 Ctrl+B调出书签，Ctrl+I调出页面信息，Ctrl+U调出页面源代码。
有替代方案吗？似乎 document.execCommand 已被弃用或即将被弃用.. MDN 链接^ 已损坏.. 任何更新？

【解决方案2】：

简短回答“是”。你可能会觉得这个article 很有趣。许多开发人员都走上了这条路。如果你想要一个不错的所见即所得编辑器，有很多可供选择。

关于您的问题：是的，您可以阅读格式。尝试在元素上使用innerHTML，您会在粗体周围找到 标签，在斜体周围找到。另外 - 在我分享的文章中，您将了解如何创建一个加粗的按钮。希望这会有所帮助！

【讨论】：

谢谢，我希望我能接受这两个答案，但我只能接受一个。 :(
一切都好，戴夫！反正他的更完整。老实说，我以前玩过 contentEditable 。但是那里有这么多成功且“兼容”的所见即所得编辑器 - 没有太多理由重新发明轮子。仍然滚动您自己的轻量级体验可能会很有趣、有趣，并且如果您的需求有帮助的话。大多数 WYSIWYG 编辑器的另一个问题 - 它们是针对 IE5、6 等的 hack 的融合。谢天谢地，我们正在进入 IE8+ 的未来 :-)
我正在尝试创建一个独特的用户界面。再次感谢您的帮助！

【解决方案3】：

您可以在此处查看哪些浏览器支持 contentEditable 功能：

正如 Tim Down 所说，您可以拨打 document.execCommand() 以粗体或斜体。

但是，不能期望所有浏览器中的键盘快捷键都相同，浏览器快捷键没有标准化。 CTRL-B 例如是 FireFox 中的书签快捷方式。

【讨论】：