5

Vue使用monaco-editor编辑器 自定义提示 代码高亮

 2 years ago
source link: https://laboo.top/2020/12/03/monaco/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Vue使用monaco-editor编辑器 自定义提示 代码高亮

发表于 2020-12-03

| 分类于 技术分享

| 0

| 阅读次数:

字数统计: 1.1k

|

阅读时长 ≈ 6 

npm install [email protected]
npm install [email protected]

vue.config

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin()
    ]
  }
};
monaco-editor
  |- util
  |- |- javascript-completion.js
  |- |- sql-completion.js
  |- |- log-language.js
  |- MonacoEditor.vue

monaco-editor/MonacoEditor.vue

<template>
  <div ref="editor" class="main"></div>
</template>

<script>
import * as monaco from "monaco-editor";
import createSqlCompleter from "./util/sql-completion";
import createJavascriptCompleter from "./util/javascript-completion";
import registerLanguage from "./util/log-language";
const global = {};

const getHints = (model) => {
  let id = model.id.substring(6);
  return (global[id] && global[id].hints) || [];
};
monaco.languages.registerCompletionItemProvider(
  "sql",
  createSqlCompleter(getHints)
);
monaco.languages.registerCompletionItemProvider(
  "javascript",
  createJavascriptCompleter(getHints)
);
registerLanguage(monaco);
/**
 * monaco options
 * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
 */
export default {
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    value: {
      type: String,
      required: true,
    },
    language: {
      type: String,
    },
    hints: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  name: "MonacoEditor",
  data() {
    return {
      editorInstance: null,
      defaultOptions: {
        theme: "vs",
        fontSize: 14,
      },
    };
  },
  watch: {
    value() {
      if (this.value !== this.editorInstance.getValue()) {
        this.editorInstance.setValue(this.value);
      }
    },
  },
  mounted() {
    this.initEditor();
    global[this.editorInstance._id] = this;
    window.addEventListener("resize", this.layout);
  },
  destroyed() {
    this.editorInstance.dispose();
    global[this.editorInstance._id] = null;
    window.removeEventListener("resize", this.layout);
  },
  methods: {
    layout() {
      this.editorInstance.layout();
    },
    undo() {
      this.editorInstance.trigger("anyString", "undo");
      this.onValueChange();
    },
    redo() {
      this.editorInstance.trigger("anyString", "redo");
      this.onValueChange();
    },
    getOptions() {
      let props = { value: this.value };
      this.language !== undefined && (props.language = this.language);
      let options = Object.assign({}, this.defaultOptions, this.options, props);
      return options;
    },
    onValueChange() {
      this.$emit("input", this.editorInstance.getValue());
      this.$emit("change", this.editorInstance.getValue());
    },
    initEditor() {
      this.MonacoEnvironment = {
        getWorkerUrl: function () {
          return "./editor.worker.bundle.js";
        },
      };

this.editorInstance = monaco.editor.create(
        this.$refs.editor,
        this.getOptions()
      );
      this.editorInstance.onContextMenu((e) => {
        this.$emit("contextmenu", e);
      });
      this.editorInstance.onDidChangeModelContent(() => {
        this.onValueChange();
      });
      this.editorInstance.addCommand(
        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
        () => {
          this.$emit("save", this.editorInstance.getValue());
        }
      );
    },
  },
};
</script>

<style scoped>
.main /deep/ .view-lines * {
  font-family: Consolas, "Courier New", monospace !important;
}
</style>

monaco-editor/util/javascript-completion.js

import * as monaco from 'monaco-editor'
// js 有内置提示
function createCompleter(getExtraHints) {
    const createSuggestions = function (model, textUntilPosition) {
        let text = model.getValue();
        textUntilPosition = textUntilPosition.replace(/[\*\[\]@\$\(\)]/g, "").replace(/(\s+|\.)/g, " ");
        let arr = textUntilPosition.split(/[\s;]/);
        let activeStr = arr[arr.length - 1];
        let len = activeStr.length;
        let rexp = new RegExp("([^\\w]|^)" + activeStr + "\\w*", "gim");
        let match = text.match(rexp);
        let mergeHints = Array.from(new Set([...getExtraHints(model)]))
            .sort()
            .filter(ele => {
                let rexp = new RegExp(ele.substr(0, len), "gim");
                return (match && match.length === 1 && ele === activeStr) ||
                    ele.length === 1 ? false : activeStr.match(rexp);
            });
        return mergeHints.map(ele => ({
            label: ele,
            kind: monaco.languages.CompletionItemKind.Text,
            documentation: ele,
            insertText: ele
        }));
    };
    return {
        provideCompletionItems(model, position) {
            let textUntilPosition = model.getValueInRange({
                startLineNumber: position.lineNumber,
                startColumn: 1,
                endLineNumber: position.lineNumber,
                endColumn: position.column
            });
            return { suggestions: createSuggestions(model, textUntilPosition) };
        }
    }
}
export default createCompleter;

monaco-editor/util/sql-completion.js

import * as monaco from 'monaco-editor'
const hints = [
    "SELECT",
    "INSERT",
    "DELETE",
    "UPDATE",
    "CREATE TABLE",
    "DROP TABLE",
    "ALTER TABLE",
    "CREATE VIEW",
    "DROP VIEW",
    "CREATE INDEX",
    "DROP INDEX",
    "CREATE PROCEDURE",
    "DROP PROCEDURE",
    "CREATE TRIGGER",
    "DROP TRIGGER",
    "CREATE SCHEMA",
    "DROP SCHEMA",
    "CREATE DOMAIN",
    "ALTER DOMAIN",
    "DROP DOMAIN",
    "GRANT",
    "DENY",
    "REVOKE",
    "COMMIT",
    "ROLLBACK",
    "SET TRANSACTION",
    "DECLARE",
    "EXPLAN",
    "OPEN",
    "FETCH",
    "CLOSE",
    "PREPARE",
    "EXECUTE",
    "DESCRIBE",
    "FORM",
    "ORDER BY"]
function createCompleter(getExtraHints) {
    const createSuggestions = function (model, textUntilPosition) {
        let text = model.getValue();
        textUntilPosition = textUntilPosition.replace(/[\*\[\]@\$\(\)]/g, "").replace(/(\s+|\.)/g, " ");
        let arr = textUntilPosition.split(/[\s;]/);
        let activeStr = arr[arr.length - 1];
        let len = activeStr.length;
        let rexp = new RegExp("([^\\w]|^)" + activeStr + "\\w*", "gim");
        let match = text.match(rexp);
        let textHints = !match ? [] :
            match.map(ele => {
                let rexp = new RegExp(activeStr, "gim");
                let search = ele.search(rexp);
                return ele.substr(search);
            });
        let mergeHints = Array.from(new Set([...hints, ...textHints, ...getExtraHints(model)]))
            .sort()
            .filter(ele => {
                let rexp = new RegExp(ele.substr(0, len), "gim");
                return (match && match.length === 1 && ele === activeStr) ||
                    ele.length === 1 ? false : activeStr.match(rexp);
            });
        return mergeHints.map(ele => ({
            label: ele,
            kind: hints.indexOf(ele) > -1 ?
                monaco.languages.CompletionItemKind.Keyword :
                monaco.languages.CompletionItemKind.Text,
            documentation: ele,
            insertText: ele
        }));
    };
    return {
        provideCompletionItems(model, position) {
            let textUntilPosition = model.getValueInRange({
                startLineNumber: position.lineNumber,
                startColumn: 1,
                endLineNumber: position.lineNumber,
                endColumn: position.column
            });
            return { suggestions: createSuggestions(model, textUntilPosition) };
        }
    }
}
export default createCompleter;

monaco-editor/util/log-language.js

function registerLanguage(monaco) {
  monaco.languages.register({
    id: "log"
  });
  monaco.languages.setMonarchTokensProvider("log", {
    tokenizer: {
      root: [
        [/(^[=a-zA-Z].*|\d\s.*)/, "log-normal"],
        [/\sERROR\s.*/, "log-error"],
        [/\sWARN\s.*/, "log-warn"],
        [/\sINFO\s.*/, "log-info"],
        [
          /^([0-9]{4}||[0-9]{2})-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}(.[0-9]{3})?/,
          "log-date",
        ],
        [
          /^[0-9]{2}\/[0-9]{2}\/[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}(.[0-9]{3})?/,
          "log-date",
        ],
        [/(^\*\*Waiting queue:.*)/, "log-info"],
        [/(^\*\*result tips:.*)/, "log-info"],
      ],
    },
  });
  monaco.editor.defineTheme("log", {
    base: "vs",
    inherit: true,
    rules: [{
        token: "log-info",
        foreground: "4b71ca"
      },
      {
        token: "log-error",
        foreground: "ff0000",
        fontStyle: "bold"
      },
      {
        token: "log-warn",
        foreground: "FFA500"
      },
      {
        token: "log-date",
        foreground: "008800"
      },
      {
        token: "log-normal",
        foreground: "808080"
      },
    ],
    colors: {
      "editor.lineHighlightBackground": "#ffffff",
      "editorGutter.background": "#f7f7f7",
    },
  });

}

export default registerLanguage;
<template>
  <monaco-editor
    v-model="value"
    language="sql"
    :options="{}"
    :hints="['table_name']"
    style="width:400px;height:300px"
  />
</template>
<script>
import MonacoEditor from "@/components/monaco-editor/MonacoEditor";
export default {
  components: {
    MonacoEditor,
  },
  data() {
    return {
      value: "xxx",
    };
  },
};
</script>
 欢迎关注我的博客公众号
如果觉得我的文章对你有用，请随意赞赏

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK