Monaco-editor使用指南,遇到问题详解

这篇具有很好参考价值的文章主要介绍了Monaco-editor使用指南,遇到问题详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

由于项目演进,codemirror已经不能满足,需要更强大的json和sql编辑器,经过多方筛选,最终选择了Monaco-editor。

基本使用

"monaco-editor": "0.21.3", //由于我们需要json的注释功能,所以选择了21版本的包
"monaco-editor-webpack-plugin": "2.1.0"   //配合上边的版本
import * as monaco from "monaco-editor";
import {language as sqlLanguage} from "monaco-editor/esm/vs/basic-languages/sql/sql"

初始化对象

<div id="monaco" style="height: 400vh; width: 50vw"></div>


this.monacoEditor = monaco.editor.create(document.getElementById("monaco"),
          {
            language: `sql`, //设置语言 
            value: `CREATE TABLE dbo.EmployeePhoto`,
            foldingImportsByDefault: true,
            foldingStrategy: "indentation", // 代码可分小段折叠
            theme: "vs-dark", //主题
            scrollbar: {
              verticalScrollbarSize: 8,
              horizontalScrollbarSize: 8,
            },
            minimap: {   //是否需要缩略图
              enabled: true,
            },
            autoIndent: true, // 自动布局
            automaticLayout: false, // 自动布局
            formatOnPaste: true, //是否粘贴自动格式化
            renderValidationDecorations: "on",
          }
        );

增加高亮

这里需要引入你需要的语言包

import "monaco-editor/esm/vs/language/json/monaco.contribution";
import "monaco-editor/esm/vs/basic-languages/sql/sql.contribution";

自定义提示

import completion from "./components/complete";  //导入自定义提示

complete.js如下


export default [  
    
    /**   * 内置函数   */  
    {    
       label: '_ABS(val:number)',
       kind: monaco.languages.CompletionItemKind.Function,
       insertText: '_ABS(${1:val})',
       insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
       detail: '返回指定参数的绝对值'
     },  {    
       label: '_COS(val:number)',
       kind: monaco.languages.CompletionItemKind.Function,
       insertText: '_COS(${1:val})',
       insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
       detail: '求指定角度的余弦值'
     }
   ]

kind为枚举类型,可根据自定义提示类型选择,可选值有 Function、Keyword、Text、Method、Event、Operator、Unit、Value、Constant、Enum、Color等

 if(!monaco.languages.registerCompletionItemProvider['sql']){ //这里为了防止提示展示多次
          monaco.languages.registerCompletionItemProvider("sql", {
            provideCompletionItems: (model,position) => {
             monaco.languages.registerCompletionItemProvider['sql'] = true
              var textUntilPosition = model.getValueInRange({startLineNumber:position.lineNumber,
               startColumn: 1,
               endLineNumber: position.lineNumber,
               endColumn: position.column,
             })
             const match = textUntilPosition.match(/(\S+)$/)
             const suggestions =[]
             let tmp = [...completion]
             tmp.forEach((item)=>{
               if(item.label.indexOf(match[0].toUpperCase())!==-1){
                   suggestions.push({...item})
                 }
             })
             const keys = ['keywords','operators','builtinFunctions']
             keys.forEach((v)=>{
               sqlLanguage[v].forEach((item)=>{ //sqlLanguage通过引入 ,可以获取到当前语言的关键字和操作和内置函数等
                 if(item.indexOf(match[0].toUpperCase())!==-1){
                   suggestions.push({
                     label:item.toLowerCase(),
                     kind:monaco.languages.CompletionItemKind.Keyword,
                     insertText:item.toLowerCase()
                   })
                 }
               })
             })
             return { suggestions: suggestions};
           },
         });
        }

QQ录屏20230215171945

自定义主题

我这里是在vs-dark的基础上定义的主题配色

monaco.editor.defineTheme('tech',{
   base:'vs-drak',
   inherit:true,
   rules:[{background:'#081641'}],
   colors:{
     // 相关颜色属性配置
     'editor.background':'#081641',
      // "editor.foreground': '#0eeeeg'
      // "editor.lineHighlightBackground': "#0e0FF20.
      // 'editorLineNumber.foreground':#998899
      // 'editor.selectionBackground': "#88000030"
      // "editor.inactiveSelectionBackground": "#88000015
   }
})

效果图如下monaco-editor,javascript,json,前端
图上是json的效果,格式化和注释以及报错的效果。文章来源地址https://www.toymoban.com/news/detail-736698.html

到了这里,关于Monaco-editor使用指南,遇到问题详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • @monaco-editor/react组件CDN加载失败解决办法

    @monaco-editor/react引入这个cdn资源会load失败 网上很多例子都是这样写的,我这样写monaco会报错 改成这样

    2024年02月15日
    浏览(37)
  • 使用 monaco-editor-nls 汉化 右键菜单汉化部分失败原因

    首先使用npm或者其他包管理工具安装依赖插件: 如果右键菜单汉化一部分失败,首先去项目下看node_modules/monaco-editor-nls/locale/zh-hans中搜vs/editor/contrib/format/看一下是否有路径有brower字段,再去对应的node_modules/monaco-editor/esm/vs/editor/contrib/format/formatActions看是否有brower文件夹 如果

    2024年02月15日
    浏览(41)
  • Monaco Editor安装,vue3中使用,自定义高亮,自定义提示,附完整代码

    root中为高亮规则。[/curl/, {token: “string.escape”}]:表示 ‘curl’ 的高亮颜色为粉色 高亮颜色参考:https://microsoft.github.io/monaco-editor/monarch.html 效果: 效果: 1、父组件:HomeView.vue 父组件中传给子组件所需的组件高度、初始内容、高亮类型、是否只读 子组件通过editorChange方法给

    2024年02月16日
    浏览(51)
  • Vue集成Monaco Editor的使用,以及开发Python代码编辑器和Sql等

    ​微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(下文简称monaco)就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码(monaco-editor-core)都是共用的,所以monaco和VSCode在编辑代码,交互以及UI上几乎是一摸一样的,有点不同的是,

    2024年02月11日
    浏览(55)
  • react-app框架——使用monaco editor实现online编辑html代码编辑器

    大家好,我是yma16,本文分享关于 react-app框架——使用monaco editor实现online编辑html代码编辑器。 monaco editor 编辑器 Monaco Editor是一款功能强大的Web编辑器,由微软开发并使用在多个项目中。它是基于VS Code编辑器的核心组件,具有类似的功能和用户体验。 Monaco Editor具有以下特点

    2024年01月20日
    浏览(49)
  • 代码编辑器之monaco editor

    (一)简介 底层vscode开发的一款编辑器,各方面的样式功能基本与vscode一致。 (二)官方文档 Monaco Editor (microsoft.github.io) (三)安装 安装时两者版本要对应,对应表在后面 (四)属性 以下是较为常见的属性 (五) 方法 挑选出使用频次较高的 monaco.editor.setTheme(‘主题色名字

    2024年02月21日
    浏览(42)
  • Monaco Editor教程(二二):monaco编辑器完整配置翻译及重点配置解析

    本篇文章讲解一下创建Monaco编辑器时所有完整配置,算是一个比较浅显的入门文章。 但由于一个Monaco的配置项多达150个,整篇文章耗费了我5天的下班时间,请读者自行点赞收藏。这里结合实际的项目业务场景介绍一些常用的,有可能修改的默认配置参数。Monaco已经默认了很

    2023年04月25日
    浏览(50)
  • Monaco Editor编辑器教程(二八):Monaco 与 VS Code 两个项目的联系与异同点

    很多人知道前端代码编辑Monaco Editor 与VS Code 有关系,但却不清楚其中的细节,本篇文章就带大家了解一下两者的关系和异同点。 首先,这两个项目都是来自微软,其中VS Code 项目Github 144K star,是基于CS架构,客户端-服务端架构。主要的技术栈是 elector,ts。 而Monaco Editor则是

    2023年04月27日
    浏览(39)
  • 全网最全最细的PLSQL下载、安装、配置、使用指南、问题解答,相关问题已汇总

    1.1、PLSQL 下载链接 1.2、PLSQL下载链接,包含64位和32位。选择64位下载就好了。 1.3、推荐大家下载14.0.6版本的PLSQL,一般不推荐下载最新的,最新的虽然不一定有bug,但是遇到了就很恶心,但是上一个版本基本上就很稳定了。14.0.6不用下载chinese语言包,就是下图的Chinese Langua

    2024年01月19日
    浏览(42)
  • Monaco Editor教程(二十):在编辑器的某个特定位置插入自定义的dom内容,图片,表单,表格,视频

    哇咔咔,这是我的第20篇Monaco教程,写完这一篇会暂时休息一段时间,练练字,存存稿,读读书,顺便修修文章。 目前全网成系统的monaco中文专栏应该只有我这一个,欢迎评论区打脸。自结束了GitLab CI/CD的专栏后,我就一直在利用业余时间学习Monaco相关的知识,一是为了弥补

    2023年04月16日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包