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' 方法的第二个参数)。
希望对您有所帮助。
所以我最近才接触到 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' 方法的第二个参数)。
希望对您有所帮助。