monaco-editor

How to change the monaco editor's locale?

由 爷，独闯天下 提交于 2020-01-25 07:25:20
问题 I want to know how to change editor's locale? eg: change en-us to zh-cn This is for monaco-editor@0.17.1，vue@2.6.10 回答1: 安装monaco-editor-locales-plugin npm instal -D monaco-editor-locales-plugin weback配置 //引入插件 const MonacoLocalesPlugin = require('monaco-editor-locales-plugin'); new MonacoLocalesPlugin({ //设置支持的语言 languages: ["es","zh-cn"], //默认语言 defaultLanguage: "zh-cn", //打印不匹配的文本 logUnmatched: false, //自定义文本翻译 mapLanguages: {"zh-cn": {"Peek References": "查找引用", "Go to Symbol...": "跳到变量位置"

Imports not finding modules and namespaces with react-monaco-editor in typescript files in Electron

由 牧云@^-^@ 提交于 2019-12-24 01:23:43
问题 I am trying to use the react-monaco-editor npm package component to import the monaco editor into my react application. These are the version of the packages I downloaded from npm: "react-monaco-editor": "^0.13.0", "@types/react-monaco-editor": "^0.10.0" Everything seems to be working great (Less, html, javascript and even doing requires in javascript), except I am getting syntax errors saying that I can't find modules I am importing or namespaces (such as Electron). This is an example error

Monaco deltaDecorations not working with angular 7

由 白昼怎懂夜的黑 提交于 2019-12-23 23:43:17
问题 I m trying to use Monaco Editor in an app I am currently developing and I need to highlight some lines of the code displayed in the editor. I m currently using the angular component ngx-monaco-editor (www.npmjs.com/package/ngx-monaco-editor) for this. I saw in the Monaco playground a way to do what I want using the following: (https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-rendering-glyphs-in-the-margin) var decorations = editor.deltaDecorations([], [ {

adding a padding to monaco editor area (lines content)

由 天大地大妈咪最大 提交于 2019-12-13 03:25:26
问题 how can I add a padding to code area in monaco editor? I went through the editor construction options but couldn't find anything related. I tried with tweaking css of lines-content, margin, editor-scrollable etc. It seems not the correct approach as tweaking them results in crazy behaviour of cursor position. 回答1: TL;DR : put some padding in the line numbers via option lineNumbers:(ln)=>'<span style="padding-rigth:4px">'+ln+'</span>' . Via CSS you were quite close, try adding a margin to the

Unable to get the text inside the monaco editor using protractor

由 送分小仙女□ 提交于 2019-12-12 10:09:03
问题 I am writing BDD tests for Monaco-editor using the protractor-cucumber framework. A while ago, I found about Monaco API's and how to set the value inside the editor programmatically. But this time, I am unable to get the text inside monaco editor using protractor. Here's a sample of my code: browser.ignoreSynchronization = true; let driver = browser.driver; // iframe ids let iframeID = 'editorFrame'; let editorSpanXpath = '//div[@id="editorContainer"]//div[contains(@class, "monaco- editor")]/

Cannot hide a Monaco Editor

由 家住魔仙堡 提交于 2019-12-11 14:47:36
问题 I have a Monaco Editor in my page. Now, I need to hide/show it from time to time. But I realise that it does not work well (see the screenshot below) with ng-show , ng-hide or ng-if . Does anyone have a solution? https://jsbin.com/mepupagisi/4/edit?html,output <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> </head> <body> <div ng-show="true"> <div id=

How to disable Monaco context menu?

由 懵懂的女人 提交于 2019-12-10 18:55:11
问题 I am using monaco-editor, and am trying to add a custom handler for Command+Enter. But when I press the command key, the Monaco context menu shows up. Is it possible to disable the context menu, or to rebind it to another key? 回答1: Sure, you can disable it, just set contextmenu to false ;) monaco.editor.create(document.getElementById("container"), { value: "function hello() {\n\talert('Hello world!');\n}", language: "javascript", // --------- contextmenu: false, // or set another keyCode here

Monaco editor dynamically resizable

由 匆匆过客 提交于 2019-12-09 16:37:43
问题 I have been searching for a discussion about if it's possible to mimic the html tag textarea's resizing when using Monaco Editor 's field all over the Internet but I couldn't find one answering my question. I'm using the monaco-editor npm package in a React application. Do you have any idea if this is easy to implement? Thank you in advance! SOLUTION With pure css I selected the target html element and just added these properties: div { resize: vertical; overflow: auto; } 回答1: TL;DR: add

Let Monaco Editor fill the rest of the page (cross-browser)

由 Deadly 提交于 2019-12-08 17:11:53
问题 I want to embed a Monaco Editor in a page under some fixed texts, I want the height of the Monaco Editor to fill exactly the rest of the page. People gave me an answer here: JSBin: <html> <style> html, body, .rb { margin: 0; height: 100%; } .rb { display: table; width: 100%; border-collapse: collapse; } .top, .myME { display: table-row; } .buffer { display: table-cell; } .top .buffer { background: lightblue; height:1%; } .myME .buffer { background: tomato; } #container { position:relative; }

Lazy-load MonacoEditor

由 风流意气都作罢 提交于 2019-12-08 08:10:18
问题 I have the following code to load MonacoEditor in index.html of my AngularJS website: <link rel="stylesheet" data-name="vs/editor/editor.main" href="/monaco-editor/min/vs/editor/editor.main.css" /> <script src="/monaco-editor/min/vs/loader.js"></script> <script src="/monaco-editor/min/vs/editor/editor.main.nls.js"></script> <script src="/monaco-editor/min/vs/editor/editor.main.js"></script> <script> require.config({ paths: { 'vs': '/monaco-editor/min/vs' }}) console.log(monaco) </script>
订阅 monaco-editor