monaco-editor - 摩纳哥单线模式

Question

我正在尝试将 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计算出来的，所以我事先不知道。

Answer 1

一个 vue 组件 vue-monaco-singleline:https://github.com/vikyd/vue-monaco-singleline

• 单行选项
• 占位符支持

演示:https://vikyd.github.io/vue-monaco-singleline-custom-language/