Vue 使用codemirror 代码展示

最新推荐文章于 2025-07-11 14:20:18 发布

Jessie丢

最新推荐文章于 2025-07-11 14:20:18 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/dfjifjeiwqfjioewqpjf/article/details/114928472

前端专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成CodeMirror代码编辑器，包括安装依赖、配置环境及组件内使用方法。通过实例展示了如何实现代码高亮、行号显示等功能，并提供了完整的组件示例。

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

安装

npm install vue-codemirror --save

在main.js中引入

import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodeMirror)

在组件中使用

import CodeMirror from 'codemirror/lib/codemirror'
import "codemirror/theme/ambiance.css";
require("codemirror/mode/javascript/javascript");

在组件中写法，要写在 mounted中

 mounted(){
      this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
      mode:"text/javascript",
      theme: "ambiance",
      readOnly:true,
      })
},

html代码写法

<textarea ref="mycode" class="codesql public_text" v-model="code"></textarea>

在切换改变值的方法，需要用到setValue方法，而在第一种方式中直接改变v-model绑定的值就可以了

changeCode(value){
  this.code = value;        
  this.editor.setValue(this.code);
}

完整代码

codeMirror.vue

<template>
  <!-- 代码展示 -->
  <div class="codebox">
    <div class="code-btndiv">
      <el-tag v-show="isShowDownload">资源包下载</el-tag>
      <el-tag>代码拷贝</el-tag>
      <el-tag>执行代码</el-tag>
    </div>
    <textarea ref="mycode"
              class="codesql public_text"
              v-model="childCode"></textarea>
  </div>
</template>

<script>
import CodeMirror from "codemirror/lib/codemirror";
import "codemirror/theme/ambiance.css";
require("codemirror/mode/javascript/javascript");
export default {
  data () {
    return {};
  },
  //父组件传值接收
  props: ["childCode", "isShowDownload"],
  mounted () {
    this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
      mode: { name: "javascript", },
      theme: "ambiance",
      selectionPointer: true,
      lineNumbers: true,
      matchBrackets: true,
      indentUnit: 4,
      indentWithTabs: true
    });
  },
  methods: {
    changeCode (value) {
      this.code = value;
      this.editor.setValue(this.code);
    }
  },
  components: {}
};
</script>

<style scoped>
.codebox {
  height: calc(100% - 50px);
  padding: 10px;
  background: #3a3b41;
  box-sizing: border-box;
}
.code-btndiv {
  height: 36px;
  margin-bottom: 10px;
}
.code-btndiv .el-tag {
  float: right;
  height: 36px;
  margin-left: 10px;
  line-height: 36px;
  border-color: #202020;
  background: #202020;
  cursor: pointer;
  color: #fff;
}
.code-btndiv .el-tag:hover {
  background: #61677a;
}
.codesql {
  background: #1d1e22;
  width: 100%;
  height: calc(100% - 3rem);
}
</style>

调用vue页面

<template>
  <!-- 垃圾车 -->
  <div class="contbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>POI</el-breadcrumb-item>
      <el-breadcrumb-item>RichPOI</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">垃圾车</a></el-breadcrumb-item>
    </el-breadcrumb>

    <!--  代码区域 -->
    <code-mirror ref="myCodeMirror"
                 style="height:calc(100% - 30px)"
                 :isShowDownload="true"></code-mirror>
  </div>
</template>

<script>
import codeMirror from "@/components/codeMirror.vue";
import { richPoiCollection } from "../../../static/lib/richpoi.js";

export default {
  created () {
    this.setShow3D(true);
    richPoiCollection.createRichPOI_Garbage();
  },
  mounted () {
    this.getCode();
  },
  methods: {
    // 展示代码
    getCode () {
      let createcode = richPoiCollection.createRichPOI_Garbage.toString();
      var code = "(\n  " + createcode + "\n)()";
      this.changeCode(code);
    },
    changeCode (codestr) {
      // 调用子组件的方法
      this.$refs.myCodeMirror.changeCode(codestr);
    }
  },
  components: {
    codeMirror
  }
}
</script>

<style scoped>
</style>