标签：Vue true Codemirror js python 编辑器 vue import codemirror

1.NPM

npm install vue-codemirror --save

2.官方地址

https://www.npmjs.com/package/vue-codemirror

3.页面引入和使用方法

有多种语言，我选择的是python主题

3.1 html

<codemirror @blur="inputChange($event)" v-model="defaultPocVal" :options="options"></codemirror>

3.2 引入

import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/python/python.js'
import'codemirror/addon/selection/active-line.js'
import'codemirror/addon/edit/closebrackets.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-light.css'

3.3 dom

data() {
      return {
        pocVal: null,
        options: {
          autoCloseBrackets: true,
          tabSize: 4, // 缩进格式
          theme: 'base16-light', // 指定主题，js 需要提前引入
          lineNumbers: true, // 是否显示行号
          //指定语言类型,如果需要编辑和显示其他语言,需要import语言js然后修改此配置
          mode: 'python',
          line: true,
          styleActiveLine: true, // 高亮选中行
          //是否为只读,如果为"nocursor" 不仅仅为只读 连光标都无法在区域聚焦
          readOnly: false,
          hintOptions: {
            completeSingle: true // 当匹配只有一项的时候是否自动补全
          }
        },
        defaultPocVal: '',
    }
} 

inputChange(e) {
    let getChangeVal = e.getValue();//获取值
    this.pocVal = getChangeVal; //赋值
    this.validPocChange() //校验功能-根据自己的需求进行校验，此处就不详细写了
},

标签：Vue,true,Codemirror,js,python,编辑器,vue,import,codemirror
来源： https://blog.csdn.net/qq_38394175/article/details/118364303

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。