• (二)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">

  • 相关阅读:
    可能是全网最详细的express--middleware
    带你学Node系列之express-CRUD
    简单聊聊ES6-Promise和Async
    Node学习图文教程之express重写留言本案例
    Node.js学习(第四章:初见express)
    彻底弄懂ES6中的Map和Set
    全网最easy的better-scroll实现上拉加载和下拉刷新
    Node中require第三方模块的规则
    canvas实现酷炫气泡效果
    Node.js实现用户评论社区(体验前后端开发的乐趣)
  • 原文地址:https://www.cnblogs.com/huair_12/p/4115450.html
Copyright © 2020-2023  润新知