侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

vue中实现Monaco Editor自定义提示功能

前端  /  管理员 发布于 5年前   981

这次接到一个需求,要在浏览器的 IDE 中支持自定义提示功能,如下所示:

可以看到,它可以根据用户输入的内容来一项一项排除,只显示完全匹配的那一项。

项目的框架是 Vue ,编辑器用的是 Monaco Editor 。

什么是 Monaco Editor

vscode 是我们经常在用的编辑器,它的前身是微软的一个叫 Monaco Workbench 的项目,而 Monaco Editor 就是从这个项目中成长出来的一个 web 编辑器,他们很大一部分的代码都是共用的,所以 Monaco Editor 和 VSCode 在编辑代码,交互及 UI 上几乎是一摸一样的。不同的是,两者的平台不一样, Monaco Editor 基于浏览器,而 VSCode 基于 electron ,所以功能上 VSCode 更加健全,性能比较强大。

用法

安装

npm install monaco-editor --save

使用

import * as monaco from 'monaco-editor';this.fileEditor = this.monaco.editor.create(document.getElementById('monaco'), { value: null, language: 'sql' // 这里以sql为例})this.fileEditor.dispose(); // 使用完后销毁

这里引入 monaco 要注意,在 react 中以下面方式引入:

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

实现自定义提示功能

查看了资料后,发现在 monaco 中有提供一个提示功能的方法 registerCompletionItemProvider ,具体实现如下:

this.monaco.languages.registerCompletionItemProvider('sql', { // 这里以sql语言为例 provideCompletionItems () {  return [{   label: '${_DB', // 显示的提示内容   kind: this.monaco.languages.CompletionItemKind['Function'], // 用来显示提示内容后的不同的图标   insertText: '{_DB', // 选择后粘贴到编辑器中的文字   detail: '' // 提示内容后的说明  }]; }, triggerCharacters: ['$'] // 触发提示的字符,可以写多个});

以上的用法,我试了一下之后发现,虽然 triggerCharacters 的值是数组,可以有多个,但是里面的字符串只能识别一个字符。一开始的需求是输入 ${_ 之后提示 ${_DB ,但是由于不能识别多个字符,只能做到出现 $ 就提示。

还有一个问题就是 registerCompletionItemProvider 的第一个参数只能是字符串,如果有多种语言只能叠加重复写,恰巧我的需求是有多种语言,所以只能如下解决,也就是每种语言都写了一遍:

['json', 'yaml', 'php', 'go', 'sql', 'java', 'markdown', 'plaintext'].map(item => { this.monaco.languages.registerCompletionItemProvider(item, {  provideCompletionItems () {   return [{    label: '${_DB',    kind: this.monaco.languages.CompletionItemKind['Function'],    insertText: '{_DB',    detail: ''   }];  },  triggerCharacters: ['$'] });});

需求是 ${_DB:key:value ,也就是说在输入 ${_DB 后,再输入一个 : 提示出 key ,在 key 之后输入 : 提示 value 。

这里又碰到一个问题,需要知道当前输入的内容来判断是 $ 还是 : ,而且后面两个触发提示的符号同是 : ,无法区分,只能通过识别 : 的位置来判断是提示 key 还是 value ,所以还要知道当前输入的 : 之前的内容。

那么只有在 provideCompletionItems 这一步判断,但是查遍了资料没有发现这样的参数, provideCompletionItems 只有 model 、 position 、 token 这几个参数,后来发现 model 中的 getLineContent 方法可以获取指定行的所有内容,而 position 可以获取当前输入行的行数和列数,于是就有了以下解决方法:

this.monaco.languages.registerCompletionItemProvider(item, { provideCompletionItems (model, position) {  // 获取当前行数  const line = position.lineNumber    // 获取当前列数  const column = position.column    // 获取当前输入行的所有内容  const content = model.getLineContent(line)    // 通过下标来获取当前光标后一个内容,即为刚输入的内容  const sym = content[column - 2]    if (sym === '$') {   return [{    label: '${_DB',    kind: this.monaco.languages.CompletionItemKind['Function'],    insertText: '{_DB',    detail: ''   }];  }    return [{   label: ':abb',   kind: this.monaco.languages.CompletionItemKind['Function'],   insertText: 'abb',   detail: ''  },  {   label: ':bc',   kind: this.monaco.languages.CompletionItemKind['Function'],   insertText: 'bc',   detail: ''  }]; }, triggerCharacters: ['$', ':']});

能获取光标后的第一个内容,后面的内容就都能获取啦,如果识别到前面的内容是 ${_DB 就提示 key ,否则提示 value 。

最后总结下来就是一定要多看文档,勤于测试就能解决问题啦~

总结

以上所述是小编给大家介绍的vue中实现Monaco Editor自定义提示功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • vue 自定义提示框(Toast)组件的实现代码


  • 上一条:
    VueCli3.0中集成MockApi的方法示例
    下一条:
    vue 使用axios 数据请求第三方插件的使用教程详解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客