codemirror使用

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,
              }
        }
    }