JS使用

使用bower下載

javascript bower i codemirror

引入樣式文件

html

引入js文件

html

文檔結(jié)構(gòu)

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下面對應(yīng)的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" 雙向綁定的數(shù)據(jù)源

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

script部分

//引入xml，html，css，js對應(yīng)的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實例中設(shè)置配置項

data(){

return {

infor：{

codeCss：‘‘

}，

cssOptions: {

tabSize: 4,

mode: ‘text/css‘,

theme: ‘monokai‘,

lineNumbers: true,

line: true,

}

}

}

總結(jié)

以上是生活随笔為你收集整理的codemirror java代码_codemirror使用(示例代码)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。