Monaco Editor教程(十五):createModel时使用Uri来自动匹配文件内容对应的源码模型。

发布于:2022-11-09 ⋅ 阅读:(8) ⋅ 点赞:(0) ⋅ 评论:(0)

前言

前面我们已经讲解过,如果要将一个文件内容显示到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资料

总结

使用uri来创建model是一个很方面的技能,你学会了吗?有时我们通过一个URL来直接打开WEB IDE来编辑文件,这样就很方便地对应URL与文件,与语言模型的关系。后面还会分享更多有关语言模型与Uri的相关知识,如果觉得有用,请分享点赞支持一下。