【问题标题】:Codemirror how to create a modeCodemirror如何创建模式
【发布时间】:2016-01-04 16:01:01
【问题描述】:

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

【问题讨论】:

    标签: javascript regex editor codemirror codemirror-modes


    【解决方案1】:

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

    Manual 在这方面的信息方面有了一个良好的开端。它提到了将simple mode addon 用于声明性方法的简单案例。它讨论了使用CodeMirror.defineMode创建新模式并提到了模式开发最重要的功能token(stream, state)

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

    该手册还提供了两种示例模式供您查看。对于一个非常简单的模式,它推荐diff 和一个更复杂的模式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”方法的第二个参数)。

    我希望这会有所帮助。

    【讨论】:

    • 很多很棒的信息,我唯一感兴趣的是为什么简单模式看起来与差异模式如此不同?
    • Diff 模式是一种简单的开始模式。 简单模式插件是一种更通用的实用模式,允许您从声明性格式创建模式,因此其目的是足够通用以支持您可能遇到的一些简单模式,而无需编写你自己的模式。插件不像从头开始编写自己的模式那样灵活,这就是 diff 模式,尽管是一种非常简单的模式。
    • 非常感谢,我仍然不知道如何完成这项工作,但这只是因为这对我来说太陌生了,但你肯定让我走上了正确的道路跨度>
    • 没问题。这种事情不是那么容易跳进去的,所以不要气馁。在浏览器开发工具中的模式逻辑中设置一些断点并逐步执行它可能会对您有所帮助。 token 函数的主要职责是解析流并为其遇到的标记返回 CSS 样式。如果您不熟悉正则表达式,我建议您查看this site
    猜你喜欢
    • 1970-01-01
    • 2020-03-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-07
    • 1970-01-01
    相关资源
    最近更新 更多