codemirror 5前端代码编辑器资料整理。

codemirror 5前端代码编辑器资料整理。

CodeMirror 是基于js的源代码编辑器组件,它支持javascript等多种高级语言,tampermonkey内置的代码编辑器就是基于它。它的按键组合方式兼容vim,emacs等,调用者还可自定义”自动完成“的列表窗口,自由度极高,相当成熟。

但是这个库也是问题多多,很需要深度配置、改良优化。

前排提示:由于信息闭塞,所以才研究了 codemirror 5。研究完才发现, codemirror 5官方基本处于弃坑状态,issue没人理。最新版本是 codemirror 6,仍在开发当中,但各方面效果已经,明显优于 codemirror 5。

0. 入门

入门很简单,可以F12观察官方demo是怎么实现的:

https://codemirror.***/ (codemirror 6

https://codemirror.***/examples/

https://codemirror.***/5/

关键代码:

<!-- Create a simple CodeMirror instance -->
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script>
  var editor = CodeMirror.fromTextArea(myTextarea, {
    lineNumbers: true
  });
  v
</script>

官方demo都是直接运行在文档页面上的。而且在编辑框内,显示的是demo自身的代码。有许多这样的小例子。

附本地运行方式:

  1. 从GitHub下载整个仓库,里面有些(比如核心库codemirror.js)是需要编译后才能运行,但有些就是普通的js代码(比如各种addon、mode),以及样式文件 codemirror.css。
  2. 从cdn或官方的demo示例中查找核心库地址:codemirror.js,这虽然是多模块编译出来的,但未经混淆,直接用vscode阅读修改并无不可,甚至效率更高。
  3. 编辑并预览 demo.html。

1. 需求:用任意键触发自动完成

https://stackoverflow.***/questions/13744176/codemirror-auto***plete-after-any-keyup

关键代码:

editor.on("keyup", function (cm, event) {
//  …… 判断条件,过滤一些按键,过滤某些上下文情况。
            CodeMirror.***mands.auto***plete(cm, null, {***pleteSingle: false});
    });

如果只要ctrl+space触发自动完成的话,是这样配置的:

var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
		……
		, extraKeys:{"Ctrl-Space":"auto***plete"}
		// 或者 :
		, extraKeys:{"Ctrl-Space":'Ctrl-Space': (cm) => 				 
			{
				cm.showHint()
			}}
		}	
	});

2. 让自动完成窗口同时 ① 包含 buffer 中提取的上下文关键词(anyword)②包含 javascript 语言的关键词。

https://discuss.codemirror.***/t/anyword-hinting-while-in-javascript-mode/1506/7

关键代码:

	function hintingFunction(cm) {
		const anyhint = CodeMirror.hint.anyword(cm, options)
		const jshint = CodeMirror.hint.javascript(cm, options)
		const words = new Set([...anyhint.list, ...jshint.list])
		if (words.size > 0) {
			return {
				list: Array.from(words), 
				from: jshint.from, 
				to: jshint.to
			}
		}
	}
	
	…… { ***pleteSingle: false, hint: hintingFunction } …… 

如果只学习官方的短demo:

	CodeMirror.***mands.auto***plete = function(cm) {
		CodeMirror.showHint(cm, CodeMirror.hint.anyword);
	}

,这样是不行的,因为只返回了anyword分析出的上下文关键词,导致javascript关键词被覆盖!

而 gpt 给的答案则更是搞笑:

	CodeMirror.***mands.auto***plete = function(cm) {
		CodeMirror.showHint(cm, CodeMirror.hint.anyword);
		CodeMirror.showHint(cm, CodeMirror.hint.javascript);
	}

整天瞎编,机器人这会儿的鼻子已经到达银河系中心了吧!

注意需要正确引入 “codemirror5-master/mode/javascript/javascript.js”,不然没有 CodeMirror.hint.javascript(自动完成),还要引入 “codemirror5-master/addon/hint/javascript-hint.js”,不然也没有 mode:"application/javascript" (语法高亮)!

3. 换行回车时,保持原有缩进。

这是 tampermonkey 编辑器最让我不爽的一点:每次在方法之间换行,都把缩进吃了。后来干脆换用vscode + @require file:///本地文件.user.js 的方式,不再用它的内置编辑器。现在,我几乎站在了同一起点,自然要比前辈做得好!

查阅资料后发现,原来“把缩进吃了”是特性,而不是bug,关掉即可:

mode : ……
, smartIndent: false

真是杀马特啊。

可关掉之后,function() { 回车后,就不会自动添加应该有的缩进了,伤脑筋……

最后通过修改 codemirror.js,让杀马特indent只自动增、不自动减:

if (how == "smart") {
	……
	indentation = Math.max(state.indented, indentation);

4. 禁止自动滚动

给安卓用,需要禁止在点击屏幕、设置光标的时候,自动发生横向滚动,以便检阅代码。

复述需求:当移动设备用户检阅代码时,很有可能正在查看长代码行,到触碰到代码行底部时,可能意外导致横向滚动归零。

此功能看起来难于实现,实则很简单:新增options.scrollOnClick,未设置时,不触发 ensureCursorVisible 即可:

  function setSelectionNoUndo(doc, sel, options) {
  	……
	if(doc.cm && doc.cm.options.scrollOnClick) // 不自动触发横向滚动,除非打字。
    if (!(options && options.scroll === false) && doc.cm && doc.cm.getOption("readOnly") != "nocursor")
      { ensureCursorVisible(doc.cm); }
  }

5. 重排自动完成列表,使常用关键词前置化

比如 敲v,自动列表为:


不合理。

通过进一步修改上面的 hintingFunction 来完成:

 		if (words.size > 0) {
			var list = Array.from(words);
			console.log(list);
			if(list[0][0]=='v'){
				var varIdx = list.indexOf("var");
				if(varIdx>0) { // 如果关键词 var 排位大于零,则交换。
					var tmp = list[0];
					list[0] = "var";
					list[varIdx] = tmp;
				}
			}
			……

方法简单粗暴,但管用:

6. 多文档与编辑状态

像scintilla这种,是一个ui呈现,切换多份不同的文件buffer。

CodeMirror 有所不同,可以从多个 TextArea 创建多份 editor 实例,比较方便。

编辑状态:需要知晓当前文档是否可以:保存、撤销、重做等状态。

↳→→ 查看 文档是否被修改:editor.doc.isClean()

↳→→ 设置 文档已保存:editor.doc.markClean()

查看 当前修改堆栈:editor.doc.history

↳→→→ 分为 : editor.doc.history.done 撤销栈、 editor.doc.history.undone 重做栈,是否读取长度就可以了呢?不行,因为修改文本选择也会算入其中。因此需要筛选出其中的 changes:

不关键代码:

		function updatePreview() {
			console.log('编辑器状态 需要保存='+!editor.doc.isClean(), "可撤销="+backable(), "可重做="+forwardable())
		}

7. 实战之实现安卓端 用户脚本编辑器

webview-gm 可以让普通的安卓weview也支持运行用户脚本(如via浏览器)。webview-gm-demo 项目中自带的编辑器就是一个 editortext,可以用 codemirror 改进。

实测在安卓端发现一个比较严重的BUG,如果用 \t 缩进,则用输入法打字的时候,会自动删除 \t 后面打出来的字符,而且是持续化删除,不知如何解决,已在github上反馈问题,顺便帮via浏览器出出名,锦上添花。(android 10 chars got deleted automatically & continuously sometimes #7036)

反馈问题后就睡觉了,第二天还是没消息。无奈只好自己下手。有人可能会问, – "为什么不用空格缩进呢? " – 空格缩进 太乱,有的用四个空格,有的用两个,甚至一个,不规范。而且用 tab 缩进还有一个空格缩进无法比拟的好处:如果需要将输入光标移动至行首,tab缩进的,只需点击第一个 tab 的前半部分即可;而多个空格缩进的,则需要精确点击第一个空格之前才行,实为反人类设计。

这种小问题无非是哪处开关问题。我用肉眼稍微扫描一遍代码,就已经定位问题所在:

option("inputStyle", mobile ? "contenteditable" : "textarea", function () {

通过在editor构造参数中传入 inputStyle : “textarea” 似乎即可解决问题。

然而…… 在 textarea 的编辑方式下,安卓上的文本选择没有了,无法选择代码段,这个bug一样严重。

所以……需要继续研究。需要开启打log模式,通过不断地运行、记录,来摸清代码运行路线,来定位问题症结所在。

最终,发现在 inputStyle : “contenteditable” 的编辑模式下,安卓输入法会将文本输入到 tab 元素之中,而tab元素有个 cm-text 属性,导致新输入的文本被忽略:

    function walk(node) {
      if (node.nodeType == 1) {
        var cmText = node.getAttribute("cm-text");
        if (cmText) {
          addText(cmText);
          return
        }
<span class="cm-tab" role="presentation" cm-text="	">    h</span>

可以看到,tab 元素里面其实还是四个空格,只不过用 cm-text=" " 标明了这其实是一个 \t 符号。可以修改相关代码,取消 cm-text 的遮蔽作用。

令人欣慰的是,codemirror 竟然会检测环境中的变量,比如在 via 浏览器中是这样的:

打出来后,似乎还能进一步读取对象的属性!

codemirror 6 更进一步,默认配置就是这样的,融合了anyword hints 与 javascript hints,var关键词也处于首位,而且还有方法模板、关键词双击高亮,更像ide了。

不过 codemirror 6 首页demo里的库是混淆过的,github 仓库里代码很少,不知是怎么一个结构。

转载请说明出处内容投诉
CSS教程_站长资源网 » codemirror 5前端代码编辑器资料整理。

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买