Codemirror如何创建模式

Codemirror how to create a mode

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

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

Manual has a good start on information for this. It mentions the simple case of using the simple mode addon 为声明式方法。它讨论了使用 CodeMirror.defineMode 创建新模式并提到了模式开发最重要的功能 token(stream, state):

a function that takes a character stream as input, advances it past a token, and returns a style for that token.

手册还给出了两种示例模式供您查看。对于真正简单的模式,它推荐 diff and for a more complex mode clike。还值得查看模式目录中的可用模式,看看您是否不能只修改现有模式以满足您的需要。

仅供参考,我将在下面包含差异模式内联:

// 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");

});

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

希望对您有所帮助。