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

Question

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

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

我尝试了什么：

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

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

标签： javascript

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 现在已经过时，因此它可能是您最安全的选择，具体取决于您需要支持的浏览器。