codemirror用来做语法高亮。纯html中插入codemirror很容易，但是用npm安装并结合vuejs库来使用则不容易。

0.基本需求

最基本的需求是

1. codemirror是通过npm方式安装的而不是下载解压后把lib目录和mode目录扔到项目根目录。希望被打包使用。

2. 代码实时高亮，显示行号，行号和代码内容不能错位有overlap，

3. 能将用户在区域内编写的代码提交到表单。换言之必须让vuejs能实时获取到在实时改变的全部用户输入内容

使用vue-cli的webpack模版建项目。

1.全局指令

定义一个全局指令(directive)，然后在index.html中使用。

index.html

  

banzi
  

  

main.js

import Vue from 'vue'
import CodeMirror from './components/v-codemirror/alias'
Vue.directive('banzi',{

twoWay: true,bind: function () {

const editor = CodeMirror(this.el,{

mode: 'javascript',lineNumbers: true

})

this.editor = editor

this.editor.on('change',function () {

this.set(this.editor.getValue())

}.bind(this))

},update: function (value,oldValue) {

this.editor.setValue(value || '')

// 测试看看vue能否得到实时改变的用户输入代码

console.log(this.editor.getValue())

}

})
/ eslint-disable no-new /

new Vue({

el: 'body',data: {

snippet: 'sss'

},methods: {

runSnippet () {

console.log(this.snippet)

}

}

})

components/v-codemirror/alias.js

// 用来把codemirror引入。
// codemirror的引入很蛋疼，npm包做的不够好。
// 参考：https://github.com/chenjiangsong/vue-codemirror/blob/master/src/components/v-codemirror/alias.js
import CodeMirror from 'codemirror/lib/codemirror.js'
require('codemirror/lib/codemirror.css')
require('codemirror/addon/lint/lint.css')
require('codemirror/mode/javascript/javascript.js')
require('codemirror/mode/css/css.js')
// require('jsonlint')
require('codemirror/addon/lint/lint.js')
require('codemirror/addon/lint/javascript-lint.js')
// require('codemirror/addon/lint/json-lint.js')
require('codemirror/addon/selection/active-line.js')
export default CodeMirror

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!