代码编辑器CodeMirror常用API

最新推荐文章于 2024-03-23 16:20:59 发布

weixin_33897722

最新推荐文章于 2024-03-23 16:20:59 发布

阅读量765

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2391658/blog/713129

版权

2019独角兽企业重金招聘Python工程师标准>>>

触发事件

1.onChange(instance,changeObj)：codeMirror文本被修改后触发。

instance是一个当前的codemirror对象，changeObj是一个｛from，to，text[,removed][，origin]｝对象。其中from，to分别表示起始行对象和结束行对象，行对象包括ch：改变位置距离行头的间隔字符，line：改变的行数。text是一个字符串数组表示被修改的文本内容，即你输入的内容。

2.onBeforeChange(instance,changObj):内容改变前被调用

3.onCursorActivity(instance)：当鼠标点击内容区、选中内容、修改内容时被触发

4.onKeyHandled:(instance,name,event):当一个都dom元素的事件触发时调用，name为操作名称。

5.onInputRead(insatance,changeObj):当一个新的input从隐藏的textara读取出时调用

6.onBeforeSelectionChange(instance,obj):当选中的区域被改变时调用，obj对象是选择的范围和改变的内容（本人未测试成功）

7.onUpdate(instance):编辑器内容被改变时触发

8.onFocus(instance):编辑器获得焦点式触发

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>