如何在 javascript 所见即所得编辑器中实现代码按钮

Question

我尝试在 javascript 中构建自己的所见即所得编辑器。 大多数按钮都非常简单（只要 document.execCommand 有一个 commandId）。

但是如何在 StackOverflow 编辑器中实现代码选项。

我尝试了什么：

document.execCommand('formatBlock', '<pre><code>')

不幸的是，它不起作用。 我做错了什么？

Answer 1

<code>标签不是formatBlock支持标签列表的一部分。 但是，您可以使用以下方法插入<pre>标记：

document.execCommand('formatBlock', false, '<pre>');

您可以查看w3c 文档以获取支持的标签列表（取决于浏览器）。

如果你不关心 IE，你可以使用insertHTML选项，结合document.getSelection() ，像这样：

document.execCommand('insertHTML', false, `<pre><code>${document.getSelection()}</code></pre>`)

或者您可以自己实现该功能。 正如其他人指出的那样， document.execCommand 现在已过时，因此它可能是您最安全的选择，具体取决于您需要支持的浏览器。