在古腾堡代码块中输入制表符

Question

古腾堡代码块用于在您的 WordPress 帖子和页面中显示代码块。在理想情况下，大多数人只是将代码直接复制并粘贴到这些块中。但我希望能够将代码输入到块中。

如何输入制表符？我希望能够在输入代码时缩进。如果我复制并粘贴一段代码，它不会丢失选项卡。但是，我一直无法输入。

键入 Tab 键会将焦点更改到下一个块。Shift-tab 将焦点更改到上一个块。CTRL-tab 什么也不做。

我已经搜索和谷歌搜索，我只能找到其他人问同样的问题，没有答案。

Answer 1

尝试将以下内容添加到页脚之前的脚本标记中（通过根据正确的过程将其排队）：

\n

var codeAreas = document.querySelectorAll(\'code.block-editor-rich-text__editable\');\nif (codeAreas) {\n    for (area of codeAreas) {\n        area.addEventListener(\'keydown\', (e) => {\n            var TABKEY = 9;\n            if (e.keyCode == TABKEY) {\n\n                if (e.preventDefault) {\n                    e.preventDefault();\n                }\n\n                var text = "\\t";\n                var selection = document.getSelection();\n                var range = selection.getRangeAt(0);\n                var startPos = range.startOffset;\n                var endPos = range.endOffset;\n\n                area.innerText = area.innerText.substring(0, startPos)\n                    + text\n                    + area.innerText.substring(endPos, area.innerText.length);\n\n                range = document.createRange();\n                range.setStart(area.firstChild, endPos + text.length);\n                selection.removeAllRanges();\n                selection.addRange(range);\n\n                return false;\n            }\n        }\n            , false);\n    }\n}\n

\n

我将尝试分解每个部分的作用。

\n

首先，我们当然会找到任何可编辑的代码标签（如果存在）并添加 keydown 事件。

\n

var codeAreas = document.querySelectorAll(\'code.block-editor-rich-text__editable\');\nif (codeAreas) {\n    for (area of codeAreas) {\n        area.addEventListener(\'keydown\', (e) => {\n...\n

\n

我们检查它是否是一个选项卡

\n

...\nvar TABKEY = 9;\n    if(e.keyCode == TABKEY) {\n\n...\n

\n

如果是，首先我们阻止 keydown 事件的默认行为（选择下一个元素）

\n

...\nif (e.preventDefault) {\n    e.preventDefault();\n}\n...\n

\n

然后设置我们想要插入的文本 \xe2\x80\x93 在这种情况下为制表符，但可以是四个空格或其他任何内容 \xe2\x80\x93 并获取当前选择的位置。如果没有突出显示任何内容，则选择范围的起点和终点将相同

\n

...\nvar text = "    ";\nvar selection = document.getSelection();\nvar range = selection.getRangeAt(0);\nvar startPos = range.startOffset;\nvar endPos = range.endOffset;\n...\n

\n

现在我们在光标处插入文本，

\n

...\narea.innerText = area.innerText.substring(0, startPos)\n    + text\n    + area.innerText.substring(endPos, area.innerText.length);\n...\n

\n

然后我们将选择重置为插入文本的末尾

\n

...\nrange = document.createRange();\nrange.setStart(area.firstChild, endPos + text.length);\nselection.removeAllRanges();\nselection.addRange(range);\n...\n

\n

然后我们返回 false 以防万一，所以该事件肯定不会触发其他处理程序

\n