在vue項目中使用codemirror插件實現代碼編輯器功能（代碼高亮顯示及自動提示

 

 

 

在vue項目中使用codemirror插件實現代碼編輯器功能（代碼高亮顯示及自動提示）

一、使用npm安裝依賴

npm install --save codemirror;

二、在頁面中放入以下代碼

<template>
  <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea>
</template>

<script>
  import "codemirror/theme/ambiance.css";
  import "codemirror/lib/codemirror.css";
  import "codemirror/addon/hint/show-hint.css";

  let CodeMirror = require("codemirror/lib/codemirror");
  require("codemirror/addon/edit/matchbrackets");
  require("codemirror/addon/selection/active-line");
  require("codemirror/mode/sql/sql");
  require("codemirror/addon/hint/show-hint");
  require("codemirror/addon/hint/sql-hint");
    export default {
        name: "codeMirror",
      data () {
        return {
          code: '//按Ctrl鍵進行代碼提示'
        }
      },
      mounted () {
        debugger
        let mime = 'text/x-mariadb'
        //let theme = 'ambiance'//設置主題，不設置的會使用默認主題
        let editor = CodeMirror.fromTextArea(this.$refs.mycode, {
          mode: mime,//選擇對應代碼編輯器的語言，我這邊選的是數據庫，根據我的狀況自行設置便可
          indentWithTabs: true,
          smartIndent: true,
          lineNumbers: true,
          matchBrackets: true,
          //theme: theme,
          // autofocus: true,
          extraKeys: {'Ctrl': 'autocomplete'},//自定義快捷鍵
          hintOptions: {//自定義提示選項
            tables: {
              users: ['name', 'score', 'birthDate'],
              countries: ['name', 'population', 'size']
            }
          }
        })
        //代碼自動提示功能，記住使用cursorActivity事件不要使用change事件，這是一個坑，那樣頁面直接會卡死
        editor.on('cursorActivity', function () {
          editor.showHint()
        })
      }
    }
</script>

<style>
  .codesql {
    font-size: 11pt;
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  }
</style>

 

三、話很少說，直接上圖

四、這樣就把代碼編輯器實現啦，是否是so easy啊，大家本身去嘗試下吧

 

https://blog.csdn.net/mySpringandhibernate/article/details/84105095

 

另外一篇文章： 使用Vue-codemirror使用總結

https://blog.csdn.net/weixin_43080277/article/details/83860629