zoukankan      html  css  js  c++  java
  • monaco editor 实现自定义提示(sql为例)

    monaco editor :https://www.cnblogs.com/XHappyness/p/9414177.html

    这里实现自己定义的提示:

    .vue

    <template>
      <div>
         <div id="container" ></div>
      </div>
    </template>

    .ts

    import { Vue, Component, Watch } from "vue-property-decorator"
    import * as monaco from 'monaco-editor';
    
    @Component({
    
    })
    
    export default class Parent extends Vue {
        ...
        value = '初始sql语句';
        monacoEditor;
        get hints() {
            let arr = [];
            .... //根据需求实时获取提示项
    
            return arr;
         }
        creatMonacoEditor() {
            //创建
            this.monacoEditor = monaco.editor.create(document.getElementById('container'), {
                value: this.value,
                language: 'sql'
            });
            //提示项设值
            monaco.languages.registerCompletionItemProvider('sql', {
                provideCompletionItems: () => {
                    return this.hints;
                }
            });
    
            //监听变化
            this.monacoEditor.onDidChangeModelContent(e => {
                this.caretOffset = e.changes[0].rangeOffset;//获取光标位置
                this.value= this.monacoEditor.getValue(); //使value和其值保持一致
            })
        }
        mounted() {
          //  注意:要等container渲染成功才能monaco.editor.create
           this.creatMonacoEditor();
        }
    
        @Watch('hints')
        triggerSuggest(newVal) {
           // 当提示项非空时,触发提示,能够使提示项更新并显示
            if (newVal.length > 0)
                this.monacoEditor.trigger('提示', 'editor.action.triggerSuggest', {});
        }
    }
  • 相关阅读:
    关于 Profile
    empty
    Vim Editor
    C++ Note
    Android NDK Sample
    Dealing with the ! when you import android project
    File attributes and Authority of Linux
    Java与C的相互调用
    The source code list of Android Git project
    Enable Android progurad in the case of multiple JAR lib
  • 原文地址:https://www.cnblogs.com/XHappyness/p/9444250.html
Copyright © 2011-2022 走看看