JS使用

使用bower下载
```
bower i codemirror
```

引入样式文件

<link rel="stylesheet" type="text/css" href="bower_components/codemirror/lib/codemirror.css">

引入js文件

<script type="text/javascript" src="bower_components/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="bower_components/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="bower_components/codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="bower_components/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script type="text/javascript" src="bower_components/codemirror/mode/css/css.js"></script>

文档结构

<div class="container">
    <textarea class="marpad " tyle="width:70%;height:300px;" id="editor" >
        <!-- 放入编辑对应的文本 -->
    </textarea>
</div>

初始化
```
// 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中使用

下载
```
npm i -S vue-codemirror
```

main.js中使用

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

.vue文件中使用

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

//v-model="infor.codeCss" 双向绑定的数据源
//:options="cssOptions" codemirror的配置项
<codemirror 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,
          }
    }
}

来源：https://www.cnblogs.com/nordon-wang/p/9141426.html

标签

codemirror

脚本

codemirror使用

JS使用

vue-cli中使用