zoukankan      html  css  js  c++  java
  • (二)CodeMirror

    theme: string

    theme:'monokai'  

    引入对应的css, <link rel="stylesheet" href="../theme/monokai.css">

    indentUnit: integer

    缩进,默认2

    keyMap: string

    keyMap: "sublime"  使用sublime中快捷键

    引入对应的js, <script src="../keymap/sublime.js"></script>

    extraKeys: object

    自定义快捷键

      extraKeys: {"Ctrl-Q": "autocomplete"}

      需引入:

      <script src="../addon/hint/show-hint.js"></script>
      <script src="../addon/hint/javascript-hint.js"></script>
      <link rel="stylesheet" href="../addon/hint/show-hint.css">

    // tab键
    extraKeys: {
        "Tab": function(cm){
             var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
             cm.replaceSelection(spaces);
        }
    }
    1 //全屏
    2 extraKeys:{
    3     "F11": function(cm) {
    4         cm.setOption("fullScreen", !cm.getOption("fullScreen"));
    5     },
    6     "Esc": function(cm) {
    7         if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
    8     }
    9 }

    gutters: array<string>

    自定义lineNumber

    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter","CodeMirror-lint-markers"]

      CodeMirror-foldgutter:展开收起

      需引入:

        <link rel="stylesheet" href="../addon/fold/foldgutter.css" />

        <script src="../addon/fold/foldcode.js"></script>

        <script src="../addon/fold/brace-fold.js"></script>

        <script src="../addon/fold/brace-fold.js"></script>

       CodeMirror-lint-markers:代码错误检测

      需引入:

      <script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>

      <script src="http://rawgithub.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>

      <script src="http://rawgithub.com/stubbornella/csslint/master/release/csslint.js"></script>

      <script src="../addon/lint/lint.js"></script>

      <script src="../addon/lint/javascript-lint.js"></script>

      <script src="../addon/lint/json-lint.js"></script>

      <script src="../addon/lint/css-lint.js"></script>

      <link rel="stylesheet" href="../addon/lint/lint.css">

  • 相关阅读:
    说说VNode节点(Vue.js实现)
    从Vue.js源码角度再看数据绑定
    《Cloud Native Infrastructure》CHAPTER 7(3)
    《Cloud Native Infrastructure》CHAPTER 7(2)
    《Cloud Native Infrastructure》CHAPTER 7 (1)
    《Cloud Native Infrastructure》CHAPTER 4(2)
    《Cloud Native Infrastructure》CHAPTER 4(1)
    《Cloud Native Infrastructure》CHAPTER 2(1)
    《Cloud Native Infrastructure》CHAPTER 1(2)
    《Cloud Native Infrastructure》CHAPTER 1(1)
  • 原文地址:https://www.cnblogs.com/huair_12/p/4115450.html
Copyright © 2011-2022 走看看