前言
前面我们已经讲解过,如果要将一个文件内容显示到monaco编辑器中,必须要创建一个model,这个model就是语言模型。它可以使用官方的编程语言规则,自动地为为我们分层,着色。我们之前是这样用的。
const model = monaco.editor.createModel(`// 重新设置值
x = y = z = 1
print(x) #1`, 'python');
第一个参数是要显示的文本内容,二个参数是编程语言, 如’python’,‘javascript’,‘java’,‘sql’。
由于文件的扩展名是多种多样的,如在一个Git仓库中,有一个’index.vue’文件,那么我们该使用哪个语言模型来渲染那? 用javascript,还是html?再比如’index.jsx’文件。 我们无法列举所有的文件类型,已经理清楚所有的文件类型对应的语言模型,这个时候我们就希望monaco能够智能帮我们处理。令人欣慰的是,monaco确实做到了这一点。在之前我们是显式地指明每个model的language的,但这个参数并不是必须的。
下面以前来看一下该方法的定义。
createModel
下面是关于createModel的方法定义。
createModel(value: string, language?: string, uri?: Uri): ITextModel
有上面的定义可知,createModel方法有三个参数,文本value,语言language,以及uri。
学过TypeScript的同学都知道在参数后面加一个’?’ 这表示该参数不是必填。那么问题来了,如果不传language,会发生什么?
我们来试一下
const model = monaco.editor.createModel(oldVersion)
editor = monaco.editor.create(document.getElementById('container'), { model })
editor.onDidChangeCursorPosition(e => {
const { position: { column, lineNumber } } = e
document.querySelector('#position').innerText = `Ln ${lineNumber}, Col ${column}`
});
编辑器渲染效果图
从上图可以看到如果没有传language与uri时,编辑器是没有对内容进行着色的。也没加载任何语言模型的资源。
接着我们创建一个Uri来测试一下效果
const uri = monaco.Uri.parse('http://baudu.com/fizz.js')
const model = monaco.editor.createModel(oldVersion, '', uri)
editor = monaco.editor.create(document.getElementById('container'), { model })
创建Uri使用monaco.Uri.parse
方法,需要传入一个符合Uri
*
* foo://example.com:8042/over/there?name=ferret#nose
* \_/ \______________/\_________/ \_________/ \__/
* | | | | |
* scheme authority path query fragment
* | _____________________|__
* / \ / \
* urn:example:animal:ferret:nose
*
该链接只需要符合上述格式即可,并不需要是一个有效的链接,你甚至可以这样写monaco.Uri.parse('http://123.cn/fizz.js')
至少需要 协议,域名,路径,三项。
再来看一下结果
从结果图上可以看到,加载了javascript的语言模型,并正确渲染了关键词。
换一种TS文件试一试
试一下vue文件
发现这种并不能解析,初步猜测是需要对应的语言模型,后面会单独研究。争取解析出GitLab WEB IDE 的所有特性。
总结
使用uri来创建model是一个很方面的技能,你学会了吗?有时我们通过一个URL来直接打开WEB IDE来编辑文件,这样就很方便地对应URL与文件,与语言模型的关系。后面还会分享更多有关语言模型与Uri的相关知识,如果觉得有用,请分享点赞支持一下。