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

古娜拉黑暗之神哇咔咔

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

阅读量1.3k

点赞数 1

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

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

本文链接：https://blog.csdn.net/ForEach_kaka/article/details/123375835

版权

工作笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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
  };