codemirror java代码_codemirror使用(示例代码)

JS使用

使用bower下载

javascript bower i codemirror

引入样式文件

html

引入js文件

html

文档结构

html

初始化

javascript // mode: "text/javascript", // mode: "text/css" window.onload = function(){ var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), { lineNumbers: true, mode: "text/html" }); }

mode需要注意的是,编辑器解析某种文本,必须引入mode下面对应的js文件,否则还是以纯文本的格式显示或者default

若是mode: "text/html",则必须在htmlmixed.js文件引入之上引入xml.js，否则html是不能被正确解析显示的

vue-cli中使用

下载

javascript npm i -S vue-codemirror

main.js中使用

javascript // codemirror 引入和使用 import VueCodemirror from ‘vue-codemirror‘ import ‘codemirror/lib/codemirror.css‘ Vue.use(VueCodemirror)

.vue文件中使用

template部分，使用双向绑定的写法

//v-model="infor.codeCss" 双向绑定的数据源

//:options="cssOptions" codemirror的配置项

script部分

//引入xml，html，css，js对应的js解析文件

import ‘codemirror/mode/javascript/javascript.js‘

import ‘codemirror/mode/css/css.js‘

import ‘codemirror/mode/xml/xml.js‘

import ‘codemirror/mode/htmlmixed/htmlmixed.js‘

// 引入主题样式文件

import ‘codemirror/theme/monokai.css‘

//Vue实例中设置配置项

data(){

return {

infor：{

codeCss：‘‘

}，

cssOptions: {

tabSize: 4,

mode: ‘text/css‘,

theme: ‘monokai‘,

lineNumbers: true,

line: true,

}

}

}