我使用以下代码在输入打开标签的“>”时自动关闭 xml 标签。
到目前为止一切正常。但我想将光标设置在标签之间。相反,光标将位于结束标记的末尾。
<myTag>[cursor should be here]</myTag> [cursor is here]
monaco.languages.registerOnTypeFormattingEditProvider('xml', {
autoFormatTriggerCharacters: ['>'],
provideOnTypeFormattingEdits: (model: any, position: any, ch: any) => {
if (ch === '>') {
const codePre = model.getValueInRange({
startLineNumber: position.lineNumber,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column,
});
const match = codePre.match(/.*<(\w+)>$/);
if (match) {
const tag = match[1];
const closingTag = `</${tag}>`;
const edit = {
range: {
startLineNumber: position.lineNumber,
startColumn: position.column,
endLineNumber: position.lineNumber,
endColumn: position.column,
},
text: `${closingTag}`,
};
return [edit];
}
}
return [];
},
});
您可以调用
editor.executeEdits,而不是从
provideOnTypeFormattingEdits
返回编辑。此函数允许传递一个可选参数 endCursorState
,其中包含您希望光标结束的详细信息(以 Selection 数组的形式)。
由于您只想将光标置于两个标签之间,因此您可以在
editor.getSelection()
函数中获取光标位置 (provideOnTypeFormattingEdits
),并将其传递给 editor.executeEdits
:
// Get the current selection (used to set the cursor position after inserting the closing tag)
const sel = editor.getSelection();
// Call executeEdits rather than returning the edits
// This allows us to pass a Selection[] which updates the cursor position afterwards
editor.executeEdits('', [edit], [sel]);
完整的
provideOnTypeFormattingEdits
功能变为:
provideOnTypeFormattingEdits: (model, position, ch) => {
if (ch === '>') {
const codePre = model.getValueInRange({
startLineNumber: position.lineNumber,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column,
});
const match = codePre.match(/.*<(\w+)>$/);
if (match) {
const tag = match[1];
const closingTag = `</${tag}>`;
const edit = {
range: {
startLineNumber: position.lineNumber,
startColumn: position.column,
endLineNumber: position.lineNumber,
endColumn: position.column,
},
text: `${closingTag}`,
};
// Get the current selection (used to set the cursor position after inserting the closing tag)
const sel = editor.getSelection();
// Call executeEdits rather than returning the edits
// This allows us to pass a Selection[] which updates the cursor position afterwards
editor.executeEdits('', [edit], [sel]);
}
}
return [];
},
摩纳哥游乐场这里有一个工作演示。