vue-codemirror

基于 CodeMirror ，适用于 Vue 的 Web 代码编辑器。(这里使用的vue3)

演示效果

版本说明

• "vue-codemirror": "^6.1.1"
• "@codemirror/lang-javascript": "^6.1.9"
• "@codemirror/lang-sql": "^6.5.4"
• "sql-formatter": "^2.3.4",

安装vue-codemirror

• 命令行安装

npm install vue-codemirror --save

使用sql/javascript语言的代码编辑器

• 命令行安装

npm install @codemirror/lang-sql
npm install @codemirror/lang-javascript

主题

• 如果想要黑色编辑器的主题, 可在命令行安装

npm i  @codemirror/theme-one-dark

封装SqlCodeEdit.vue组件

配置说明

对SQL代码进行格式化/清空功能

• npm安装sql-formatter插件

npm install sql-formatter --save

• 引入该sql-formatter.js文件

import sqlFormatter from 'sql-formatter';

• 使用方法

//代码格式化
const formatSql = () => {
  sqlCode.value=sqlFormatter.format(sqlCode.value)
}
// 清除值
const clearVal = () => {
  sqlCode.value=''
}

SqlCodeEdit组件完整代码

<template>
    <codemirror
        v-model="sqlCode"
        :placeholder="editorPlaceholder"
        :style="{ height: editorHeight+'px' }"
        :autofocus="true"
        :indent-with-tab="true"
        :tabSize="tabSize"
        :extensions="extensions"
        :scrollbarStyle="null"
        @change="emit('change',$event)"
    />
    <div class="sql-format">
      <span @click="formatSql">格式化SQL</span>
      <span @click="clearVal">一键清空</span>
    </div>
</template>

<script setup>
import {Codemirror} from "vue-codemirror";
import {sql} from '@codemirror/lang-sql';
import {defineEmits, ref, defineProps, computed} from "vue";
import * as sqlFormatter from "sql-formatter";

const emit = defineEmits()
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  editorPlaceholder: {
    type: String,
    default: "请输入代码",
  },
  editorHeight: {
    type: String,
    default: "300",
  },
  tabSize: {
    type: Number,
    default: 2,
  }
})
const _value = computed({
  get() {
    return props.value || ""
  },
  set(value) {
    emit('update:value', value)
  }
})
const sqlCode = ref();
const extensions = ref([sql()]);
//代码格式化
const formatSql = () => {
  sqlCode.value=sqlFormatter.format(sqlCode.value)
}
// 清除值
const clearVal = () => {
  sqlCode.value=''
}
</script>
<style scoped lang="scss">
.sql-format {
  background-color: #f7f7f7;
  text-align: right;
  color: #2a99ff;
  padding: 10px;

  span:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  > span:first-child {
    margin-right: 10px;
  }
}
</style>

父组件调用SqlCodeEdit组件

<template>
 <div class="code-editor">
          <sql-code-edit v-model="sqlCode"  :editor-placeholder="'请输入sql语句进行查询'"
                         :editor-height="300" :tab-size="4" @change="changeSqlCode"/>
  </div>
</template>

<script setup>
import SqlCodeEdit from "@/components/codeEdit/SqlCodeEdit.vue";
const sqlCode = ref('')
//实时获取sql语句
const changeSqlCode = (val) => {
  sqlCode.value = val
}
</script>

<style lang="scss" scoped>
.code-editor {
  border: 1px solid #b3b3b3;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
</style>

JavaScript代码编辑器

• 只需要引入及将extensions改为javascript()即可

import {javascript} from "@codemirror/lang-javascript";
const extensions = ref(javascript());

JsCodeEdit完整代码

<template>
    <codemirror
        v-model="sqlCode"
        :placeholder="editorPlaceholder"
        :style="{ height: editorHeight+'px' }"
        :autofocus="true"
        :indent-with-tab="true"
        :tabSize="tabSize"
        :extensions="extensions"
        :scrollbarStyle="null"
    />
</template>

<script setup>
import {Codemirror} from "vue-codemirror";
import {javascript} from "@codemirror/lang-javascript";
import {defineEmits, ref, defineProps, computed} from "vue";

const emit = defineEmits()
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  editorPlaceholder: {
    type: String,
    default: "请输入代码",
  },
  editorHeight: {
    type: String,
    default: "300",
  },
  tabSize: {
    type: Number,
    default: 2,
  }
})
const _value = computed({
  get() {
    return props.value || ""
  },
  set(value) {
    emit('update:value', value)
  }
})
const sqlCode = ref();
const extensions = ref(javascript());
</script>

父组件调用JsCodeEdit组件

<js-code-edit v-model="config.http.fail" :editor-placeholder="'请输入js代码'" :editor-height="250" :tab-size="2"/>
import JsCodeEdit from "@/components/codeEdit/JsCodeEdit.vue";

这样我就在vue3中使用vue-codemirror插件实现代码编辑器