Javascript 内容可编辑、CTRL-B CTRL-I和保存

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

我注意到，在Chrome中，我可以通过按CTRL-B和CTRL-I使单词粗体/斜体

这可能是其他浏览器的预期行为吗？例如，这在Chrome中起作用：

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

---

我想知道我是否可以阅读此格式，以保存用户的编辑？另外，我可以创建一个粗体按钮和斜体按钮来触发CTRL-B和CTRL-I吗？或者我是否需要依靠用户按CTRL-B和CTRL-I（这意味着向他们提供一个通知）。你可能会发现这很有趣。许多“开发者”都走上了这条路。如果你想要一个好的所见即所得编辑器，有很多可供选择

---

关于您的问题：是的，您可以阅读格式。在元素上尝试innerHTML，您会在粗体周围找到

标记，在斜体周围找到

。此外，在我分享的文章中，您将了解如何创建一个粗体按钮。希望这有帮助

这是所有主流浏览器的标准配置。在所有主要浏览器中，还可以通过

document.execCommand（）

使用键盘快捷键的编程等价物。例如，粗体和斜体命令可以按如下方式执行：

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

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

foo

、

foo

和

foo

参考资料：

• ,
• （Mozilla）

---

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

正如Tim Down所说，您可以调用

document.execCommand（）

将内容加粗或斜体化

---

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

谢谢，这非常有用。但是你知道为什么这个例子（）在IE9中不起作用吗？至少ctrl-B和ctrl-I不是。执行命令行吗？没关系。我自己的网页很有用。由于某种原因，JSFIDLE页面不起作用。@Dave：是的，我认为这是JSFIDLE的问题。在Firefox（v76，Linux）中似乎不起作用。Ctrl+B显示书签，Ctrl+I显示页面信息，Ctrl+U显示页面来源。谢谢，我希望我能接受两个答案，但我只能接受一个：（太好了，Dave！不管怎么说，他的更完整。老实说，我以前玩过contentEditable。但是现在有这么多成功且“兼容”的WYSIWYG编辑器-没有太多理由重新发明轮子。如果你的需求不太大，继续滚动你自己的轻量级体验可能会很有趣、有趣。另一个问题是em与大多数WYSIWYG编辑器-它们是IE5、6等的黑客组合。谢天谢地，我们正在进入IE8+的未来：-）我正在尝试创建一个独特的UI。再次感谢你的帮助！