Heim > Java > javaLernprogramm > Wie implementiert Monaco Editor SQL- und Java-Code-Eingabeaufforderungen?

Wie implementiert Monaco Editor SQL- und Java-Code-Eingabeaufforderungen?

PHPz
Freigeben: 2023-05-07 22:13:10
nach vorne
1586 Leute haben es durchsucht

Monaco-Editor erstellt

//创建和设置值
if (!this.monacoEditor) {
  this.monacoEditor = monaco.editor.create(this._node, {
    value: value || code,
    language: language,
    ...options
  });
  this.monacoEditor.onDidChangeModelContent(e => {
    const value = this.monacoEditor.getValue(); //使value和其值保持一致
    if (value !== this.value) {
      this.value = value;
      this.props.getValue && this.props.getValue(value)
    }
  });
}
Nach dem Login kopieren
// 设置编辑器语言
  this.completionItemProvider = monaco.languages.registerCompletionItemProvider(
    language,
    {
      triggerCharacters: [' ', '.', ...this.triggerCharacters],
      provideCompletionItems: (model, position) =>
        this.sqlSnippets.provideCompletionItems(model, position)
    }
  )
Nach dem Login kopieren

SQL-Eingabeaufforderung (Bibliothekstabellenfeldzuordnung)

async provideCompletionItems(model, position) {
  const { lineNumber, column } = position
  // 光标前文本
  const textBeforePointer = model.getValueInRange({
    startLineNumber: lineNumber,
    startColumn: 0,
    endLineNumber: lineNumber,
    endColumn: column
  })
  const textBeforePointerMulti = model.getValueInRange({
    startLineNumber: 1,
    startColumn: 0,
    endLineNumber: lineNumber,
    endColumn: column
  })
  // 光标后文本
  // const textAfterPointer = model.getValueInRange({
  //   startLineNumber: lineNumber,
  //   startColumn: column,
  //   endLineNumber: lineNumber,
  //   endColumn: model.getLineMaxColumn(model.getLineCount())
  // })
  const textAfterPointerMulti = model.getValueInRange({
    startLineNumber: lineNumber,
    startColumn: column,
    endLineNumber: model.getLineCount(),
    endColumn: model.getLineMaxColumn(model.getLineCount())
  })
  // const nextTokens = textAfterPointer.trim().split(/\s+/)
  // const nextToken = nextTokens[0].toLowerCase()
  const tokens = textBeforePointer.trim().split(/\s+/)
  const lastToken = tokens[tokens.length - 1].toLowerCase()
  // 数据库名联想
  if (lastToken === 'database') {
    return {
      suggestions: this.getDataBaseSuggest()
    }
    // <库名>.<表名> || <别名>.<字段>
  } else if (lastToken.endsWith(&#39;.&#39;)) {
    // 去掉点后的字符串
    const tokenNoDot = lastToken.slice(0, lastToken.length - 1)
    if (this.dbSchema.find(db => db.dbName === tokenNoDot.replace(/^.*,/g, &#39;&#39;))) {
      // <库名>.<表名>联想
      return {
        suggestions: [...this.getTableSuggestByDbName(tokenNoDot.replace(/^.*,/g, &#39;&#39;))]
      }
    } else if (this.getTableNameAndTableAlia(textBeforePointerMulti.split(&#39;;&#39;)[textBeforePointerMulti.split(&#39;;&#39;).length - 1] + textAfterPointerMulti.split(&#39;;&#39;)[0])) {
      const tableInfoList = this.getTableNameAndTableAlia(textBeforePointerMulti.split(&#39;;&#39;)[textBeforePointerMulti.split(&#39;;&#39;).length - 1] + textAfterPointerMulti.split(&#39;;&#39;)[0])
      const currentTable = tableInfoList.find(item => item.tableAlia === tokenNoDot.replace(/^.*,/g, &#39;&#39;))
      // <别名>.<字段>联想
      if (currentTable && currentTable.tableName) {
        return {
          suggestions: await this.getTableColumnSuggestByTableAlia(currentTable.tableName)
        }
      } else {
        return {
          suggestions: []
        }
      }
    } else {
      return {
        suggestions: []
      }
    }
    // 库名联想
  } else if (lastToken === &#39;from&#39; || lastToken === &#39;join&#39; || /(from|join)\s+.*?\s?,\s*$/.test(textBeforePointer.replace(/.*?(/gm, &#39;&#39;).toLowerCase())) {
    // const tables = this.getTableSuggest()
    const databases = this.getDataBaseSuggest()
    return {
      suggestions: databases
    }
    // 字段联想
  } else if ([&#39;select&#39;, &#39;where&#39;, &#39;order by&#39;, &#39;group by&#39;, &#39;by&#39;, &#39;and&#39;, &#39;or&#39;, &#39;having&#39;, &#39;distinct&#39;, &#39;on&#39;].includes(lastToken.replace(/.*?(/g, &#39;&#39;)) || (lastToken.endsWith(&#39;.&#39;) && !this.dbSchema.find(db => `${db.dbName}.` === lastToken)) || /(select|where|order by|group by|by|and|or|having|distinct|on)\s+.*?\s?,\s*$/.test(textBeforePointer.toLowerCase())) {
    return {
      suggestions: await this.getTableColumnSuggest()
    }
    // 自定义字段联想
  } else if (this.customKeywords.toString().includes(lastToken)) {
    return {
      suggestions: this.getCustomSuggest(lastToken.startsWith(&#39;$&#39;))
    }
    // 默认联想
  } else {
    return {
      suggestions: [...this.getDataBaseSuggest(), ...this.getTableSuggest(), ...this.getKeywordSuggest()]
    }
  }
}
Nach dem Login kopieren

Benutzerdefinierte Java-Zuordnung

 monaco.languages.registerCompletionItemProvider(
  language,
  {
    triggerCharacters: [&#39;ds.&#39;,&#39;.&#39;],
    provideCompletionItems: (model, position) =>{
      const { lineNumber, column } = position
      // 光标前文本
      const textBeforePointer = model.getValueInRange({
        startLineNumber: lineNumber,
        startColumn: 0,
        endLineNumber: lineNumber,
        endColumn: column
      })
      if([&#39;ds.&#39;].includes(textBeforePointer)){
        return {suggestions: [
            {
              label: &#39;connection("")&#39;, //显示的提示名称
              insertText: &#39;connection("")&#39; //选择后粘贴到编辑器中的文字
            },
            {
              label: &#39;query("","")&#39;,
              insertText: &#39;query("","")&#39;
            },
          ]};
      }
      if([&#39;ds.connection("").&#39;].includes(textBeforePointer)){
        return {suggestions: [
            {
              label: &#39;query("")&#39;,
              insertText: &#39;query("")&#39;,
            },
          ]};
      }
    }
  }
)
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie implementiert Monaco Editor SQL- und Java-Code-Eingabeaufforderungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:yisu.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage