CodeMirror自定义语言（MODE）关键字、自动补全

效果预览：

自定义关键字：s ss sss

新建mode，为了方便，所以使用zzzz

zzzz.js如下：

(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("zzzz", function(config, parserConfig) {
		var jsonldMode = parserConfig.jsonld;
		var isOperatorChar = /[+\-*&%=<>!?|~^@]/;

		function parseWords(str) {
			var obj = {},
				words = str.split(" ");
			for (var i = 0; i < words.length; ++i) obj[words[i]] = true;
			return obj;
		}

		// 关键字
		var keywords = parseWords("s ss sss");

		var type, content;

		function ret(tp, style, cont) {
			type = tp;
			content = cont;
			return style;
		}

		function tokenBase(stream, state) {
			var beforeParams = state.beforeParams;
			state.beforeParams = false;
			var ch = stream.next();

			if (ch == '"' || ch == "'") {
				state.tokenize = tokenString(ch);
				return state.tokenize(stream, state);
			} else if (ch == "." && stream.match(/^\d[\d_]*(?:[eE][+\-]?[\d_]+)?/)) {
				return ret("number", "number");
			} else if (ch == '[') {
				stream.skipTo(']');
				stream.eat(']');
				return ret("string", "string");
			} else if (/\d/.test(ch)) {
				stream.eatWhile(/[\w\.]/);
				return "number";
			} else {
				stream.eatWhile(/[\w\$_{}\xa1-\uffff]/);
				var word = stream.current();
				if (keywords && keywords.propertyIsEnumerable(word)) {
					state.beforeParams = true;
					return "keyword";
				}

				return null;
			}
		}

		function tokenString(quote) {
			return function(stream, state) {
				var escaped = false,
					next;
				if (jsonldMode && stream.peek() == "@" && stream.match(isJsonldKeyword)) {
					state.tokenize = tokenBase;
					return ret("jsonld-keyword", "meta");
				}
				while ((next = stream.next()) != null) {
					if (next == quote && !escaped) break;
					escaped = !escaped && next == "\\";
				}
				if (!escaped) state.tokenize = tokenBase;
				return ret("string", "string");
			};
		}

		return {
			startState: function() {
				return {
					tokenize: tokenBase,
					beforeParams: false,
					inParams: false
				};
			},
			token: function(stream, state) {
				if (stream.eatSpace()) return null;
				return state.tokenize(stream, state);
			}
		};

	});

	CodeMirror.registerHelper("hint", "zzzz", function(cm) {
		//自动补全
		var hintList = ['s', 'ss', 'sss'];

		var cur = cm.getCursor(),
			token = cm.getTokenAt(cur);
		var start = token.start,
			end = cur.ch
		var str = token.string

		var list = hintList.filter(function(item) {
			return item.indexOf(str) === 0
		})

		if (list.length) return {
			list: list,
			from: CodeMirror.Pos(cur.line, start),
			to: CodeMirror.Pos(cur.line, end)
		};
	});

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

});

zzzz.html如下：

<!doctype html>

<title>ZZZZ</title>
<meta charset="utf-8" />

<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../theme/night.css">
<script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<script src="../addon/edit/matchbrackets.js"></script>
<script src="../mode/zzzz/zzzz.js"></script>
<article>
	<h2>Test ZZZZ</h2>
	<form>
		<textarea id="code" name="code"></textarea>
	</form>

	<script>
		var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
			theme: "night",
			extraKeys: { "Alt-/": "autocomplete" },
			lineNumbers: true,
			matchBrackets: true,
			mode: "text/x-zzzz"
		});
		
		//设置为只读
		//editor.setOption("readOnly", true);
	</script>
</article>

原文链接：https://blog.csdn.net/CHN_Li/article/details/99717860