分类目录归档:翻译

CodeMirror API 配置函数

配置函数包含对编辑器的配置项的设置和获取,快捷键设置和事件的绑定等。
阅读全文 CodeMirror API 配置函数

CodeMirror API 光标和选区操作

CodeMirror API 光标和选区操作包含编辑器设置,获取,光标位置;获取光标处”词”,选区设置,获取等。
阅读全文 CodeMirror API 光标和选区操作

CodeMirror API 内容操作函数

内容操作函数用于操作文档内容。包含行操作和内容设置获取等。

阅读全文 CodeMirror API 内容操作函数

CodeMirror中的{line, ch}对象

在CodeMirror,经常会遇到这样结构的对象:

{
    line: integer,
    ch: integer
}

有时候是作为参数传给函数,也有的时候是某个函数的返回值。需要注意的是,对象中的linech分别表示编辑器内容的行号和列号,它们都是从0开始计数的。例如,要取从第6行第3个字符第13行第22个字符的内容,那么就要这样写:

var contentRange = editor.getRange({line: 5, ch: 2}, {line: 12, ch:21});

CodeMirror API

CodeMirror的很多特性都只能通过其API使用。因此,如果你想要将其暴露给用户的话,那就需要编写代码或使用插件。

API有基于0的linech属性。

doc.前缀的函数(除非另外指定),可以被CodeMirror(editor)实例和CodeMirror.Doc实例调用。而cm.前缀的函数,只能被CodeMirror的实例调用。
阅读全文 CodeMirror API

CodeMirror 命令

命令是编辑器上不带参数调用的动作。他们主要用于绑定到快捷键上。命令通过向CodeMirror.commands添加属性来定义。CodeMirror定义了一些常用的命令,他们大多数都被绑定到了快捷键上。命令属性的值必须是带一个参数(编辑器实例)的函数。
阅读全文 CodeMirror 命令

CodeMirror 快捷键映射

CodeMirror 发布时附带了 EmacsVimSublime-Text等类型的快捷键配置。

键可以通过名称和字符来识别。 CodeMirror.keyNames定义了常用的快捷键。例如,定义的名称:Enter, F5, 和 Q。这些可以添加前缀hift-, Cmd-, Ctrl-, Alt-,例如,组合起来:Shift-Ctrl-Space
阅读全文 CodeMirror 快捷键映射

CodeMirror 代码二叉树结构可视化



代码二叉树结构可视化


var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
  lineWrapping: true
});
var updateTimeout;
editor.on("change", function(cm) {
  clearTimeout(updateTimeout);
  updateTimeout = setTimeout(updateVisual, 200);
});
updateVisual();

function updateVisual() {
  var out = document.getElementById("output");
  out.innerHTML = "";

  function drawTree(out, node) {
    if (node.lines) {
      out.appendChild(document.createElement("div")).innerHTML =
        "<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px";
      var lines = out.appendChild(document.createElement("div"));
      lines.style.lineHeight = "6px"; lines.style.marginLeft = "10px";
      for (var i = 0; i < node.lines.length; ++i) {
        var line = node.lines[i], lineElt = lines.appendChild(document.createElement("div"));
        lineElt.className = "lineblock";
        var gray = Math.min(line.text.length * 3, 230), col = gray.toString(16);
        if (col.length == 1) col = "0" + col;
        lineElt.style.background = "#" + col + col + col;
        lineElt.style.width = Math.max(Math.round(line.height / 3), 1) + "px";
      }
    } else {
      out.appendChild(document.createElement("div")).innerHTML =
        "<b>node</b>: " + node.size + " lines, " + Math.round(node.height) + " px";
      var sub = out.appendChild(document.createElement("div"));
      sub.style.paddingLeft = "20px";
      for (var i = 0; i < node.children.length; ++i)
        drawTree(sub, node.children[i]);
    }
  }
  drawTree(out, editor.getDoc());
}

CodeMirror 单词自动完成




单词自动完成

alt-space(注:官方这里用的是ctrl-space,因为在我们日常输入中这个组合通常用于切换输入法,所以我改了一下)激活自动完成功能。自动完成使用了模块anyword-hint.js

      CodeMirror.commands.autocomplete = function(cm) {
        cm.showHint({hint: CodeMirror.hint.anyword});
      }
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        extraKeys: {"Alt-Space": "autocomplete"}
      });

CodeMirror代码自动换行以及代码框自适应高度

设置自动换行

editor.setOption('lineWrapping', true);

设置自动高度

editor.setSize('auto', 'auto');

示例请看 http://sojs.hyjiacan.com/view/3