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

Question

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

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

键入 Tab 键会将焦点更改到下一个块。 Shift-tab 将焦点更改到前一个块。 CTRL-tab 不执行任何操作。

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

Answer 1

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

var codeAreas = document.querySelectorAll('code.block-editor-rich-text__editable');
if (codeAreas) {
    for (area of codeAreas) {
        area.addEventListener('keydown', (e) => {
            var TABKEY = 9;
            if (e.keyCode == TABKEY) {

                if (e.preventDefault) {
                    e.preventDefault();
                }

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

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

                range = document.createRange();
                range.setStart(area.firstChild, endPos + text.length);
                selection.removeAllRanges();
                selection.addRange(range);

                return false;
            }
        }
            , false);
    }
}

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

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

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

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

...
var TABKEY = 9;
    if(e.keyCode == TABKEY) {

...

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

...
if (e.preventDefault) {
    e.preventDefault();
}
...

然后设置我们想要插入的文本 - 在本例中是一个制表符，但可以是四个空格或其他任何内容 - 并且还获取当前选择的位置。如果没有突出显示任何内容，则选择范围的起点和终点将相同

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

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

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

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

...
range = document.createRange();
range.setStart(area.firstChild, endPos + text.length);
selection.removeAllRanges();
selection.addRange(range);
...

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

Answer 2

我通过安装“Enlighter - 可自定义语法荧光笔”插件解决了这个问题。我的代码现在已根据需要进行了良好的格式化。

Answer 3

您可以使用剪贴板。 一旦您的块中包含 TAB 字符，您就可以突出显示复制，然后将其粘贴到需要 TAB 的任何位置 - 所有这些都在古腾堡编辑器中进行。 （要获取第一个制表符，您可以从任何文本编辑器中剪切和粘贴）。 这并不理想，但我发现它已经足够好了。