摩纳哥单线模式
Monaco single-line mode
我正在尝试将 Monaco 用作自动完成和语法突出显示的单行编辑器,有点类似于 excel 公式编辑器:
到目前为止我得到了什么:
let element = document.getElementById("searchbar");
element.innerHTML = "";
let searchEditor = monaco.editor.create(element, {
value: "Patient?",
language: "url",
minimap: {enabled: false},
lineNumbers: 'off',
glyphMargin: false,
folding: false,
scrollbar: {
vertical: "hidden",
horizontal: "auto"
},
fontSize: 16,
theme: "myCoolTheme",
scrollBeyondLastLine: false,
overviewRulerLanes: 0,
overviewRulerBorder: false,
hideCursorInOverviewRuler: true
});
(<any>window).searchEditor = searchEditor;
window.addEventListener("resize", function () {
(<any>window).searchEditor.layout();
});
// let myBinding = searchEditor.addCommand(monaco.KeyCode.Enter,
// );
searchEditor.onKeyDown(function (e: IKeyboardEvent) {
if (e.keyCode === KeyCode.Enter) {
//TODO: Maybe there is a public API for this?
if ((<any>searchEditor)._contentWidgets["editor.widget.suggestWidget"].widget.state !== 3) {
that.$emit('startRequest', searchEditor.getValue());
e.stopPropagation();
e.preventDefault();
} else {
}
}
});
到目前为止,我对此非常满意。但是,有人知道如何在编辑器中居中显示行吗?字段的高度是由CSS计算出来的,所以我事先不知道
一个 vue 组件 vue-monaco-singleline
: https://github.com/vikyd/vue-monaco-singleline
- 单行选项
- 占位符支持
演示:https://vikyd.github.io/vue-monaco-singleline-custom-language/
另一种可能性是遵循 this 方法。在一行中查找 Monaco.
我正在尝试将 Monaco 用作自动完成和语法突出显示的单行编辑器,有点类似于 excel 公式编辑器:
到目前为止我得到了什么:
let element = document.getElementById("searchbar");
element.innerHTML = "";
let searchEditor = monaco.editor.create(element, {
value: "Patient?",
language: "url",
minimap: {enabled: false},
lineNumbers: 'off',
glyphMargin: false,
folding: false,
scrollbar: {
vertical: "hidden",
horizontal: "auto"
},
fontSize: 16,
theme: "myCoolTheme",
scrollBeyondLastLine: false,
overviewRulerLanes: 0,
overviewRulerBorder: false,
hideCursorInOverviewRuler: true
});
(<any>window).searchEditor = searchEditor;
window.addEventListener("resize", function () {
(<any>window).searchEditor.layout();
});
// let myBinding = searchEditor.addCommand(monaco.KeyCode.Enter,
// );
searchEditor.onKeyDown(function (e: IKeyboardEvent) {
if (e.keyCode === KeyCode.Enter) {
//TODO: Maybe there is a public API for this?
if ((<any>searchEditor)._contentWidgets["editor.widget.suggestWidget"].widget.state !== 3) {
that.$emit('startRequest', searchEditor.getValue());
e.stopPropagation();
e.preventDefault();
} else {
}
}
});
到目前为止,我对此非常满意。但是,有人知道如何在编辑器中居中显示行吗?字段的高度是由CSS计算出来的,所以我事先不知道
一个 vue 组件 vue-monaco-singleline
: https://github.com/vikyd/vue-monaco-singleline
- 单行选项
- 占位符支持
演示:https://vikyd.github.io/vue-monaco-singleline-custom-language/
另一种可能性是遵循 this 方法。在一行中查找 Monaco.