vue2实现codemirror在线代码编辑器（代码提示，行数显示..）

翘首自由的九零后

已于 2023-06-07 16:15:51 修改

阅读量8.5k

点赞数 3

分类专栏： vue 文章标签：前端 vue.js

于 2022-04-07 16:40:54 首次发布

本文链接：https://blog.csdn.net/qq_44700839/article/details/124019232

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文档介绍了如何在项目中利用Codemirror插件创建一个具备执行、清空、代码提示和行数显示功能的SQL语句自查询代码编辑器。首先，需要安装并引入必要的样式和库文件，然后在子组件中初始化CodeMirror编辑器，设置相应的配置如语法模式、代码提示等。子组件与父组件间通过props和事件进行通信，实现了值的双向绑定和清空功能。在父组件中可以通过引用调用子组件的方法来清空编辑器内容，并接收子组件的输入值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求

需要在管理系统模块中实现用户SQL语句自查询，实现一个代码编辑器，要求有执行，清空，代码提示，行数显示功能,，实现效果如下：
------------------------------------------------------------
实现思路
使用 codemirror 插件封装组件，然后再父组件中引入使用，通过组件之间的通信方法，进行值的传递。
子组件封装（writeSql.vue）
首先需要安装 codemirror ：cnpm i codemirror --save

<template>
  <div class="in-coder-panel">
    <textarea ref="mycode" v-model="code" class="text_cls" ></textarea>
  </div>
</template>

<script>
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'
const 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: 'in-coder',
  props: {
    // 外部传入的内容，用于实现双向绑定
    valueC:{
      type:String,

    } ,
    // 外部传入的语法类型
    language: {
      type: String,
      default: null,
    },
  },
  watch: {
    valueC(newVal) {
    	//父组件传过来的值，这个需求需要传入点击的数据库表名，默认展示“SELECT * FROM student”
       this.editor.setValue('SELECT * FROM '+newVal)
    },
  },
  data() {
    return {
      code: '',
      editor: null,
      content: '',
   	}
  },
  mounted() {
    // 初始化
    this._initialize()
  },
  methods: {
  	//父组件调用清空的方法
    resetData() {
      this.editor.setValue('')
    },
    // 初始化
    _initialize() {
      const mime = 'text/x-mariadb'
      // let theme = 'ambiance'//设置主题，不设置的会使用默认主题
      this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
     	// 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
        mode: mime, 
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,
        matchBrackets: true,
        extraKeys: {
          // 触发提示按键
          Ctrl: 'autocomplete',
        },
        hintOptions: {
          // 自定义提示选项
          completeSingle: false, // 当匹配只有一项的时候是否自动补全
          tables: {}, // 代码提示
        },
      })
      this.editor.setValue(this.value || this.code)
      // 支持双向绑定
      this.editor.on('change', (coder) => {
        this.code = coder.getValue()
        if (this.$emit) {
          // 通过监听Input事件可以拿到动态改变的code值
          this.$emit('input', this.code)
        }
      })
      this.editor.on('inputRead', () => {
        this.editor.showHint()
      })
    },
  },
}
</script>

<style lang="less">
.CodeMirror {
  height: 180px !important;
}
.in-coder-panel {
  border-radius: 5px;
  flex-grow: 1;
  display: flex;
  position: relative;
  .text_cls {
  }
  .cm-variable {
    font-size: 18px;
  }
}
.CodeMirror {
  flex-grow: 1;
  z-index: 1;
}
.CodeMirror-code {
  line-height: 19px;
}

.code-mode-select {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 10px;
  max-width: 130px;
}
</style>

父组件调用

引入：

import writeSql from '../../components/writeSql.vue

components: {
    writeSql,
  },

应用：

<write-sql
	ref="changeSql"
	@input="input"
 	:valueC="data_value"

></write-sql>

父组件中 ----------------------------------------
ref="changeSql" 通过 this.$refs.changeSql.resetData() 调用子组件中的重置方法，清空代码块中的值。
@input="input" 子组件 $emit 返回的sql语句。
data_value 是点击数据库表名时送给子组件的值，默认显示 “SELECT * FROM 表名”。