vue2项目使用codemirror插件实现代码编辑器功能

1、使用npm安装依赖

npm install --save codemirror

2、在页面中放入如下代码

<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>

vue2 ts 类装饰版本组件

<template>
  <textarea ref="container" v-model="value"></textarea>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Ref, Model, Emit, Watch, Prop } from 'vue-property-decorator';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql';
import 'codemirror/theme/neat.css';
import 'codemirror/addon/scroll/simplescrollbars.css';
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/mode/meta';
import 'codemirror/addon/selection/active-line';

@Component
export default class CodeEditor extends Vue {
  @Ref('container') container!: HTMLTextAreaElement;

  @Model('change') value!: string;

  @Prop(Array) list?: string[];

  @Prop(Number) ch?: number;

  @Prop(String) height?: string;

  mirror: CodeMirror.Editor = CodeMirror(this.container);

  constructor() {
    super();
    this.changeListener = this.changeListener.bind(this);
  }

  mounted() {
    this.mirror = CodeMirror.fromTextArea(this.container, {
      value: this.value,
      mode: 'text/x-sql',
      theme: 'neat',
      styleActiveLine: true,
      readOnly: false,
      smartIndent: true,
      scrollbarStyle: 'overlay',
      lineNumbers: true,
      // matchBrackets: true,
      autofocus: true,
      // autoMatchParens: true,
      // styleSelectedText: true,
      indentUnit: 4,
      extraKeys: { Ctrl: 'autocomplete' },
      showHint: true,
      autocorrect: true,
      autocapitalize: true,
    });

    this.mirror.setSize('heigth', this.height);
    this.mirror.on('change', this.changeListener);
  }

  private changeListener(editor: CodeMirror.Editor, change: CodeMirror.EditorChangeLinkedList) {
    this.handleContentChange(this.mirror.getValue());
    if (change.origin === '+input' || change.origin === '*compose') {
      setTimeout(() => {
        const cursor = editor.getCursor();
        const str = editor.getLine(cursor.line);

        if (this.list && this.list.length) {
          // eslint-disable-next-line
          const hint = () => {
            return {
              from: { ch: this.ch || str.lastIndexOf(' ') + 1, line: cursor.line },
              to: { ch: str.length, line: cursor.line },
              list: [...(this.list || ['allen'])],
            };
          };
          editor.showHint({
            completeSingle: false,
            hint,
          });
        } else {
          this.mirror.showHint({ completeSingle: false, hint: CodeMirror.hint.sql });
        }
      }, 20);
    }
  }

  @Watch('value')
  handleValueChange(newValue: string) {
    if (newValue !== this.mirror.getValue()) {
      if (!newValue) {
        this.mirror.setValue('');
        return;
      }
      const value = newValue
        .split(' ')
        .filter((item) => !!item)
        .join(' ');
      this.mirror.setValue(value);
      this.mirror.focus();
      this.mirror.setCursor(newValue.length);
    }
  }

  @Emit('change')
  handleContentChange(content: string) {
    return content;
  }

  beforeDestroy() {
    this.mirror.off('change', this.changeListener);
  }
}
</script>

<style lang="less">
.CodeMirror {
  line-height: 1.5;
}
</style>

3、话不多说，直接上图