代碼編輯器CodeMirror經常使用API

時間 2019-11-12

標籤代碼編輯器 codemirror 經常使用 api 简体版

原文原文鏈接

觸發事件

1.onChange(instance,changeObj)：codeMirror文本被修改後觸發。css

instance是一個當前的codemirror對象，changeObj是一個｛from，to，text[,removed][，origin]｝對象。其中from，to分別表示起始行對象和結束行對象，行對象包括ch：改變位置距離行頭的間隔字符，line：改變的行數。text是一個字符串數組表示被修改的文本內容，即你輸入的內容。html

2.onBeforeChange(instance,changObj):內容改變前被調用node

3.onCursorActivity(instance)：當鼠標點擊內容區、選中內容、修改內容時被觸發git

4.onKeyHandled:(instance,name,event):當一個都dom元素的事件觸發時調用，name爲操做名稱。github

5.onInputRead(insatance,changeObj):當一個新的input從隱藏的textara讀取出時調用express

6.onBeforeSelectionChange(instance,obj):當選中的區域被改變時調用，obj對象是選擇的範圍和改變的內容（本人未測試成功）數組

7.onUpdate(instance):編輯器內容被改變時觸發app

8.onFocus(instance):編輯器得到焦點式觸發dom

9.onBlur(instance):編輯器失去焦點時觸發編輯器

經常使用方法

editor.refresh();刷新編輯器

editor.setOption('lineWrapping', true);設置自動換行

editor.setSize('auto', 'auto');設置自適應高度

getValue():獲取編輯器文本內容

setValue(text):設置編輯器文本內容

getRange({line,ch},{line,ch}):獲取指定範圍內的文本內容第一個對象是起始座標，第二個是結束座標

replaceRange(replaceStr,{line,ch},{line,ch}):替換指定區域的內容

getLine(line)：獲取指定行的文本內容

lineCount():統計編輯器內容行數

firstLine():獲取第一行行數，默認爲0，從開始計數

lastLine():獲取最後一行行數

getLineHandle(line):根據行號獲取行句柄

getSelection():獲取鼠標選中區域的代碼

replaceSelection(str):替換選中區域的代碼

setSelection({line:num,ch:num1},{line:num2,ch:num3}):設置一個區域被選中

somethingSelected()：判斷是否被選擇

getEditor()：獲取CodeMirror對像

undo()：撤銷

redo():回退

CodeMirror的一個實例

<!doctype html>

<title>CodeMirror: Full Screen Editing</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/display/fullscreen.css">
<link rel="stylesheet" href="../theme/night.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../addon/display/fullscreen.js"></script>

<div id=nav>
  <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>

  <ul>
    <li><a href="../index.html">Home</a>
    <li><a href="../doc/manual.html">Manual</a>
    <li><a href="https://github.com/codemirror/codemirror">Code</a>
  </ul>
  <ul>
    <li><a class=active href="#">Full Screen Editing</a>
  </ul>
</div>

<article>
<h2>Full Screen Editing</h2>
<form><textarea id="code" name="code" rows="5">
<dl>
  <dt id="option_indentWithTabs"><code><strong>indentWithTabs</strong>: boolean</code></dt>
  <dd>Whether, when indenting, the first N*<code>tabSize</code>
  spaces should be replaced by N tabs. Default is false.</dd>

  <dt id="option_electricChars"><code><strong>electricChars</strong>: boolean</code></dt>
  <dd>Configures whether the editor should re-indent the current
  line when a character is typed that might change its proper
  indentation (only works if the mode supports indentation).
  Default is true.</dd>

  <dt id="option_specialChars"><code><strong>specialChars</strong>: RegExp</code></dt>
  <dd>A regular expression used to determine which characters
  should be replaced by a
  special <a href="#option_specialCharPlaceholder">placeholder</a>.
  Mostly useful for non-printing special characters. The default
  is <code>/[\u0000-\u0019\u00ad\u200b\u2028\u2029\ufeff]/</code>.</dd>
  <dt id="option_specialCharPlaceholder"><code><strong>specialCharPlaceholder</strong>: function(char) → Element</code></dt>
  <dd>A function that, given a special character identified by
  the <a href="#option_specialChars"><code>specialChars</code></a>
  option, produces a DOM node that is used to represent the
  character. By default, a red dot (<span style="color: red">•</span>)
  is shown, with a title tooltip to indicate the character code.</dd>

  <dt id="option_rtlMoveVisually"><code><strong>rtlMoveVisually</strong>: boolean</code></dt>
  <dd>Determines whether horizontal cursor movement through
  right-to-left (Arabic, Hebrew) text is visual (pressing the left
  arrow moves the cursor left) or logical (pressing the left arrow
  moves to the next lower index in the string, which is visually
  right in right-to-left text). The default is <code>false</code>
  on Windows, and <code>true</code> on other platforms.</dd>
</dl>
</textarea></form>
  <script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      theme: "night",
      extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      }
    });
  </script>

    <p>Demonstration of
    the <a href="../doc/manual.html#addon_fullscreen">fullscreen</a>
    addon. Press <strong>F11</strong> when cursor is in the editor to
    toggle full screen editing. <strong>Esc</strong> can also be used
    to <i>exit</i> full screen editing.</p>
  </article>