如何在 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 現在已過時，因此它可能是您最安全的選擇，具體取決於您需要支持的瀏覽器。