Why write this article?

We recently developed a simple online Code Editor based on the Monaco Editor implementation, which for those of you who haven’t seen Monaco, is also the basis for our common VS Code implementation

Back to business, the Monaco Editor has a full official document, so why write this article? Because the official document is too difficult to use, it is difficult to find the API, but if I find it, I can see it in a fog, maybe I refer to the posture is wrong, welcome friends who have experience in using the document to advise in the comments ~

Without further ado, let’s begin with a summary of my common features in development.

Begin to use

I use the Vue version of the package Monaco – Editor-vue as follows:

<template>
  <div id="app">
    <MonacoEditor
      theme="vs-dark"
      language="javascript"
      :editorMounted="onEditorMounted"
      :options="options"
      @change="onChange"
    ></MonacoEditor>
  </div>
</template>
 
<script>
import MonacoEditor from 'monaco-editor-vue';
export default {
  name: "App".components: {
    MonacoEditor
  },
  data() {
    return {
      options: {
        value: ' './ / initial value
        foldingStrategy: 'indentation'.// Code can be folded into small pieces
        automaticLayout: true.// Adaptive layout
        overviewRulerBorder: false.// Do not scroll the border of the bar
        autoClosingBrackets: true.tabSize: 2.// TAB indent length
        minimap: {
          enabled: false.// No minimaps,}}}},methods: {
    onChange(value) {
      console.log(value);
    }

    onEditorMounted(editor, monaco) {
      window.editor = editor
      window.monaco = monaco
    },
  }
};
</script>
Copy the code

Commonly used API

editor.getValue()

Gets all the text in the editor and returns a string that preserves all the information (newlines, indentation, comments, and so on).

editor.getSelection()

Gets the range of the selected text in the editor and returns an object like this:

{
    startLineNumber: 0.startColumnNumber: 0.endLineNumber: 0.endColumnNumber: 0,}Copy the code

editor.getModel()

Get the editor’s current TextModel, generally not directly used, through the TextModel can be various operations on text.

editor.getModel().findMatches(str|regexp)

⌘ functionality is the same as “⌘ + F”, which searches for matching text in the editor through a string or regular expression and returns a set of matching text range.

editor.getModel().getValueInRange(range)

Range retrieves the text in the range and returns a string.

editor.getModel().getLinesContent(lineNumber)

If lineNumber is passed, the text string for the corresponding row is returned, and if no argument is passed, the set of text strings for all rows is returned.

editor.executeEdits()

To insert code at the specified location, unlike editor.setvalue (), you can override input with “⌘ + Z”.

editor.executeEdits('insert-code'[{range: {
      startLineNumber,
      startColumn,
      endLineNumber,
      endColumn,
    },
    text,
  },
])
Copy the code

editor.addAction()

Add a column of custom actions in the right – click menu.

this.editor.addAction({
  id: ' '.// Menu item ID
  label: ' '.// Menu item name
  keybindings: [this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KEY_J], // Bind the shortcut key
  contextMenuGroupId: '9_cutcopypaste'.// The group of the owning menu
  run: () = > {}, // Click to execute the action
})
Copy the code

monaco.editor.setModelMarkers()

Use wavy lines to mark error messages in the editor.

monaco.editor.setModelMarkers(editor.getModel(), 'owner', [
  {
    startLineNumber,
    startColumn,
    endLineNumber,
    endColumn,
    message, // Prompt copy
    severity: monaco.MarkerSeverity.Error, // The type of the prompt},])Copy the code

recruitment

Wechat Pay recruitment front-end and back-end development, welcome to recommend, resume can be sent to [email protected] ~