Codemirror 如何创建模式

Mar*_*kus 4 javascript regex editor codemirror codemirror-modes

所以我最近才开始使用 codemirror,因为我的网站需要一个文本编辑器,但这意味着我对这个程序知之甚少。我让编辑器在 javascript 模式下工作,但我需要为编辑器创建一些语法,我相信这意味着我必须为编辑器创建一个模式,但我在这样做时遇到了麻烦。我已经阅读了几次手册,但有些东西对我来说并没有点击,可能是因为我从未使用过这样的东西。无论如何,现在我只需要通过创建简单的加、减和乘函数来掌握它。如果有人能让我对此感到满意,我将不胜感激。

Mat*_*ers 6

首先,您确定需要新模式吗?您是否正在尝试支持许多内置模式之一尚未提供的自定义DSL语法?

手册对这些信息的良好开端。它提到了将简单模式插件用于声明性方法的简单案例。它讨论了CodeMirror.defineMode创建新模式的使用,并提到了模式开发最重要的功能token(stream, state)

一个函数,它接受一个字符流作为输入,将它推进到一个标记,并返回该标记的样式。

该手册还提供了两个示例模式供查看。对于一个非常简单的模式,它推荐diff和一个更复杂的模式clike。还值得查看 mode 目录中的可用模式,看看您是否不能仅修改现有模式以满足您的需要。

仅供参考,我将在下面包含 diff 模式:

// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE

(function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
    mod(require("../../lib/codemirror"));
  else if (typeof define == "function" && define.amd) // AMD
    define(["../../lib/codemirror"], mod);
  else // Plain browser env
    mod(CodeMirror);
})(function(CodeMirror) {
"use strict";

CodeMirror.defineMode("diff", function() {

  var TOKEN_NAMES = {
    '+': 'positive',
    '-': 'negative',
    '@': 'meta'
  };

  return {
    token: function(stream) {
      var tw_pos = stream.string.search(/[\t ]+?$/);

      if (!stream.sol() || tw_pos === 0) {
        stream.skipToEnd();
        return ("error " + (
          TOKEN_NAMES[stream.string.charAt(0)] || '')).replace(/ $/, '');
      }

      var token_name = TOKEN_NAMES[stream.peek()] || stream.skipToEnd();

      if (tw_pos === -1) {
        stream.skipToEnd();
      } else {
        stream.pos = tw_pos;
      }

      return token_name;
    }
  };
});

CodeMirror.defineMIME("text/x-diff", "diff");

});
Run Code Online (Sandbox Code Playgroud)

这是一个非常简单的模式,它甚至不包含任何状态信息(因此不包含 'token' 方法的第二个参数)。

我希望这有帮助。