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

秒速五厘米 2022-09-08 14:47 840阅读 0赞

## 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、话不多说，直接上图 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeXVzaXJ4aWFlcg_size_16_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeXVzaXJ4aWFlcg_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a2e3f65348fa4b8ab3492eb03f327a86.png