vue（element）中使用monaco實(shí)現(xiàn)代碼高亮

使用的是vue語(yǔ)言佃牛，用element的組件淹辞，要做一個(gè)在線編輯代碼，要求輸入代碼內(nèi)容吁脱，可以進(jìn)行高亮展示桑涎，可以切換各不同語(yǔ)言，而且支持關(guān)鍵字補(bǔ)全兼贡，還要有一個(gè)各不同版本間的代碼左右比較攻冷，這就是需求。

至于為什么選中monaco遍希，請(qǐng)查看 vue（element）中代碼高亮插件全面對(duì)比

好了等曼，現(xiàn)在正式開工吧！

首先需要下載monaco-editor組件凿蒜，monaco-editor-webpack-plugin組件

npm install monaco-editor
npm install monaco-editor-webpack-plugin

當(dāng)然啦禁谦，npm下載很是緩慢，換個(gè)國(guó)內(nèi)鏡像废封，淘寶的吧州泊。果然，速度就嗖嗖的起來漂洋。

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

cnpm install monaco-editor
cnpm install monaco-editor-webpack-plugin

可在node_modules下看到其目錄結(jié)構(gòu)

monaco_lgx211

核心代碼如下所示

首先寫個(gè)組件遥皂，供其他頁(yè)面引入調(diào)用力喷，

CodeEditor.vue

<template>
  <div class="code-container" ref="container"></div>
</template>

<script>
  import * as monaco from "monaco-editor";
  let sqlStr =
    "ADD EXCEPT PERCENT ALL EXEC PLAN ALTER EXECUTE PRECISION AND EXISTS PRIMARY ANY EXIT PRINT AS FETCH PROC ASC FILE PROCEDURE AUTHORIZATION FILLFACTOR PUBLIC BACKUP FOR RAISERROR BEGIN FOREIGN READ BETWEEN FREETEXT READTEXT BREAK FREETEXTTABLE RECONFIGURE BROWSE FROM REFERENCES BULK FULL REPLICATION BY FUNCTION RESTORE CASCADE GOTO RESTRICT CASE GRANT RETURN CHECK GROUP REVOKE CHECKPOINT HAVING RIGHT CLOSE HOLDLOCK ROLLBACK CLUSTERED IDENTITY ROWCOUNT COALESCE IDENTITY_INSERT ROWGUIDCOL COLLATE IDENTITYCOL RULE COLUMN IF SAVE COMMIT IN SCHEMA COMPUTE INDEX SELECT CONSTRAINT INNER SESSION_USER CONTAINS INSERT SET CONTAINSTABLE INTERSECT SETUSER CONTINUE INTO SHUTDOWN CONVERT IS SOME CREATE JOIN STATISTICS CROSS KEY SYSTEM_USER CURRENT KILL TABLE CURRENT_DATE LEFT TEXTSIZE CURRENT_TIME LIKE THEN CURRENT_TIMESTAMP LINENO TO CURRENT_USER LOAD TOP CURSOR NATIONAL TRAN DATABASE NOCHECK TRANSACTION DBCC NONCLUSTERED TRIGGER DEALLOCATE NOT TRUNCATE DECLARE NULL TSEQUAL DEFAULT NULLIF UNION DELETE OF UNIQUE DENY OFF UPDATE DESC OFFSETS UPDATETEXT DISK ON USE DISTINCT OPEN USER DISTRIBUTED OPENDATASOURCE VALUES DOUBLE OPENQUERY VARYING DROP OPENROWSET VIEW DUMMY OPENXML WAITFOR DUMP OPTION WHEN ELSE OR WHERE END ORDER WHILE ERRLVL OUTER WITH ESCAPE OVER WRITETEXT";
  export default {
    name: "codeEditor",

    props: {
      options: {
        type: Object,
        default() {
          return {
            language: "java", // shell、sql演训、python
            readOnly: true // 不能編輯
          };
        }
      },

      value: {
        type: String,
        default: ""
      }
    },

    data() {
      return {
        monacoInstance: null,
        provider: null,
        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"
        ]
      };
    },
    created() {
      this.initHints();
    },
    mounted() {
      this.init();
    },
    beforeDestroy() {
      this.dispose();
    },

    methods: {
      dispose() {
        if (this.monacoInstance) {
          if (this.monacoInstance.getModel()) {
            this.monacoInstance.getModel().dispose();
          }
          this.monacoInstance.dispose();
          this.monacoInstance = null;
          if(this.provider){
            this.provider.dispose();
            this.provider = null
          }
        }
      },
      initHints() {
        let sqlArr = sqlStr.split(" ");
        this.hints = Array.from(new Set([...this.hints, ...sqlArr])).sort();
      },
      init() {
        let that = this;
        this.dispose();
        let createCompleters = textUntilPosition => {
          //過濾特殊字符
          let _textUntilPosition = textUntilPosition
            .replace(/[\*\[\]@\$\(\)]/g, "")
            .replace(/(\s+|\.)/g, " ");
          //切割成數(shù)組
          let arr = _textUntilPosition.split(" ");
          //取當(dāng)前輸入值
          let activeStr = arr[arr.length - 1];
          //獲得輸入值的長(zhǎng)度
          let len = activeStr.length;

          //獲得編輯區(qū)域內(nèi)已經(jīng)存在的內(nèi)容
          let rexp = new RegExp('([^\\w]|^)'+activeStr+'\\w*', "gim");
          let match = that.value.match(rexp);
          let _hints = !match ? [] : match.map(ele => {
            let rexp = new RegExp(activeStr, "gim");
            let search = ele.search(rexp);
            return ele.substr(search)
          })

          //查找匹配當(dāng)前輸入值的元素
          let hints = Array.from(new Set([...that.hints, ..._hints])).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);
          });
          //添加內(nèi)容提示
          let res = hints.map(ele => {
            return {
              label: ele,
              kind: that.hints.indexOf(ele) > -1 ? monaco.languages.CompletionItemKind.Keyword : monaco.languages.CompletionItemKind.Text,
              documentation: ele,
              insertText: ele
            };
          });
          return res;
        };
        this.provider = monaco.languages.registerCompletionItemProvider("sql", {
          provideCompletionItems(model, position) {
            var textUntilPosition = model.getValueInRange({
              startLineNumber: position.lineNumber,
              startColumn: 1,
              endLineNumber: position.lineNumber,
              endColumn: position.column
            });
            var suggestions = createCompleters(textUntilPosition);
            return {
              suggestions: suggestions
            };

            return createCompleters(textUntilPosition);
          }
        });

        // 初始化編輯器實(shí)例
        this.monacoInstance = monaco.editor.create(this.$refs["container"], {
          value: this.value,
          theme: "vs-dark",
          autoIndex: true,
          ...this.options
        });

        // 監(jiān)聽編輯器content變化事件
        this.monacoInstance.onDidChangeModelContent(() => {
          this.$emit("contentChange", this.monacoInstance.getValue());
        });
      }
    }
  };
</script>

<style lang="scss" scope>
  .code-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid #eaeaea;
    .monaco-editor .scroll-decoration {
      box-shadow: none;
    }
  }
</style>

引入頁(yè)面弟孟，供本頁(yè)面使用

index.vue

<template>
  <div class="container">
    <code-editor
      :options="options"
      :value="content"
      @contentChange="contentChange"
      style="height: 400px; width: 600px;"
    ></code-editor>
  </div>
</template>

<script>
  import CodeEditor from "@/components/CodeEditor";
  export default {
    name: "SQLEditor",
    components: {
      CodeEditor
    },
    data() {
      return {
        content: "",
        options: {
          language: "sql",
          theme: 'vs',
          readOnly: false
        }
      };
    },
    created() {},
    methods: {
      // 綁定編輯器value值的變化
      contentChange(val) {
        this.content = val;
      }
    }
  };
</script>


<style scoped lang="scss">
  .container {
    text-align: left;
    padding: 10px;
  }
</style>

效果如下所示

代碼自動(dòng)提示效果，如下所示

monaco自動(dòng)提示_lgx211

代碼高亮效果样悟，代碼段折疊效果拂募，右側(cè)預(yù)覽效果如下所示

monaco代碼高亮折疊_lgx211