在vue+ts项目中使用vue-codemirror

古娜拉黑暗之神哇咔咔

已于 2022-07-27 17:12:45 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：工作笔记文章标签： vue.js 前端

于 2022-03-09 14:02:58 首次发布

本文链接：https://blog.youkuaiyun.com/ForEach_kaka/article/details/123375835

工作笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue应用中安装并配置vue-codemirror组件，包括引入步骤、在组件中使用codemirror API以及设置各种选项。适合前端开发者了解如何在项目中集成高级代码编辑体验。

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

1.npm install vue-codemirror --save

vue版本^2.6.11

2.src/common/typings/shims-global.d.ts

declare module 'vue-codemirror';

3.可以在自己使用的页面中直接引入

import { codemirror } from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';

@Component({
  components: {
    codemirror,
  },
})

4.页面使用; codemirror api

// index.vue

<codemirror ref="myCmGenerate" v-model="code.inputContent" :options="codeOptions" @changes="changeInputCode"></codemirror>


// index.ts

codeOptions = {
    tabSize: 4,
    mode: {
      name: 'javascript',
      json: true,
    },
    theme: 'foo bar',
    lineNumbers: true,
    lineWrapping: true,
    extraKeys: { 'Ctrl': 'autocomplete' },
    lineWiseCopeCut: true,
    showCursorWhenSelecting: true,
    matchBrackets: true,
    line: true,
    readOnly: true,
    disableInput: true
  };