vue集成codemirror代码编辑器

青年码农

发布于 2022-05-31 09:40:48

1.8K0

发布于 2022-05-31 09:40:48

文章被收录于专栏：青年码农青年码农青年码农

CodeMirror是一个用 JavaScript 为浏览器实现的通用文本编辑器。它专门用于编辑代码，并带有多种语言模式和插件，可实现更高级的编辑功能。

本教程是基于vue2实现集成，使用vue-codemirror插件

1. 安装

# npm
npm install vue-codemirror -S
# yarn
yarn add vue-codemirror -S

2. 新建组件并引入

<template>
  <div>
    <codemirror
      ref="cm"
      v-model="value"
      :options="options"
      @input="inputChange"
    ></codemirror>
  </div>
</template>

<script>
// 全局引入vue-codemirror
import { codemirror } from "vue-codemirror";
// 引入css文件
import "codemirror/lib/codemirror.css";
// 引入主题 可多个
import "codemirror/theme/ayu-mirage.css";
// 引入语言模式 可多个
import "codemirror/mode/sql/sql.js";
export default {
  name: "codemirror",
  components: { codemirror },
  props: {
    value: {
      default: ""
    }
  },
  data() {
    return {
      options: {
        // 语言及语法模式
        mode: "text/x-sql",
        // 主题
        theme: "ayu-mirage",
        // 显示函数
        line: true,
        lineNumbers: true,
        // 软换行
        lineWrapping: true,
        // tab宽度
        tabSize: 4
      }
    };
  },
  methods: {
    inputChange(content) {
      this.$nextTick(() => {
        console.log("content:" + content);
      });
    }
  }
};
</script>

主题引入多个，我们可以实现动态切换主题，语言模式支持多种语言。

options支持的属性很多，上面的例子只使用了几个常用的属性，更多属性请参照官方文档