type
status
date
slug
summary
tags
category
icon
password
Edited
Mar 26, 2024 04:53 PM
Created
Mar 25, 2024 01:04 PM
最近因为需要实现一个在线代码的需求，所以研究了相关的内容，其中最主要的就是编辑器相关的内容
使用
对于 monaco 编辑器的选择，我使用了
@monaco-editor/react 库简单的对齐进行了封装使用
本地使用
在使用
@monaco-editor/react 库，会通过CDN去加载编辑器的资源
但有时候，我们所需要的环境，并不能直接去访问外网，故我们需要将这些资源改变成本地加载
首先我们需要一个公共位置去存放这些资源，如 vite 的 public 文件夹等等
我们需要把
monaco-editor 库下载下来，主要是需要 min/vs 内容，提供给编辑器其实还有另一种方式，是安装 monaco-editor 库，并引入即可，但之前测试的时候是有问题的，包括 webpack 等等，不太稳定，所以没有选择这种方式
通过这种方式，就可以避免编辑器去加载远程资源了
类型提示
在在线代码里，我们还需要自定义一些专属的东西，如全局上下文等内容
通过 Suggestion 提供类型提示
Monaco Editor (microsoft.github.io)
基本的操作方法可以查看一下官网的案例
主要就是通过
monaco.languages.registerCompletionItemProvider 方法去注册，然后返回规定格式的 suggestion 即可，最后再选择一个触发方式，即 triggerCharacters。上面代码实现的就是按下
. 时触发提示，并提示出 test 方法
接下来，我们来根据对象结果信息，动态的去触发提示，并封装几个方法
使用
效果如下
但后面发现，这种方式只对对象有效，而且无法去判别方法和属性等等，而且实现起来很麻烦，所以就有了下面这种方式了
通过 Typescript 提供类型提示
这种方式的话，只需要通过
typescript 的 declare 去声明类型即可，方便很多还是上面那个例子，现在换一种实现方式
首先先定义所需要的类型声明
注意，使用的时候要变为字符串形式，传入给 monaco 编辑器
然后，在 monaco 编辑器中引入该类型提示即可
参考链接
- 作者:JinSo
- 链接:https://jinso365.top/article/monaco-editor
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。