wordpress 在 gutenberg 代码块中键入制表符

i7uq4tfw  于 2023-08-03  发布在  WordPress
关注(0)|答案(2)|浏览(156)

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

**如何键入制表符?**我希望在输入代码时能够缩进。如果我复制并粘贴一个代码块,它不会丢失制表符。但是我一直打不出一个来。

键入tab键将焦点更改到下一个块。Shift-tab将焦点更改为上一个块。CTRL-tab不执行任何操作。
我已经搜索和谷歌,我只能找到其他人问同样的问题,没有答案。

avkwfej4

avkwfej41#

尝试将以下内容添加到脚本标记中的页脚之前(根据正确的过程将其入队):

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以防万一,这样事件肯定不会触发其他处理程序

jogvjijk

jogvjijk2#

我已经解决了这个问题,通过安装“Enlighter -可定制的语法高亮”插件。我的代码现在根据需要进行了很好的格式化。

相关问题