matt-oconnell / vue-monaco-editor Goto Github PK
View Code? Open in Web Editor NEWMonaco Editor Vue Component
License: MIT License
Monaco Editor Vue Component
License: MIT License
That makes the Monaco editors web workers not work!
Hello,
Correct me if I'm wrong, but I think that changeThrottle is only applied to emmited events in case no change handler is provided. It will be nice if such configuration is applied to both in case it is specifically provided .
Regards
The latest version of Monaco editor is 0.10.0
You can upgrade just by changing the default source path to the following string: https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.10.0/min
Alternatively you can explain in the documentation that you can provide the CDN string as the srcPath
string like this
<MonacoEditor srcPath="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.10.0/min" >
Regards
<template>
<div class="hello">
<monaco-editor height="300" width="1200" language="javascript" :code="code"
:editorOptions="options" @mounted="onMounted"
@codeChange="onCodeChange">
</monaco-editor>
</div>
</template>
<script>
import { MonacoEditor } from "vue-monaco-editor";
export default {
name: "HelloWorld",
components: {
"monaco-editor": MonacoEditor
},
data() {
return {
msg: "Welcome to Your Vue.js App",
code: 'const str = "hello world";\n// Type away! \n',
options: {
selectOnLineNumbers: false
}
};
},
methods: {
onMounted(val) {
console.log(val);
},
onCodeChange(val) {
console.log(val);
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
support Diff Editor ?
How can I modify theme by select box?
I'm trying to apply this module. However I think, there is no event function to modify theme ..
I spent with about 5~7 hours..
I try to build the app (with npm run build), the following error happens:
ERROR in static/js/vendor.11abc18390715624e180.js from UglifyJs SyntaxError: Unexpected token punc «(», expected punc «:» [./~/vue-monaco-editor /src/MonacoLoader.js:3,0]
There is a need that i can append a new monaco to element when a button is clicked. This is my way.
`
<button @click='addMonaco'>add
addMonaco: function() {
let vueClass = Vue.extend(Monaco);
let vueObject = new vueClass({
});
console.log(vueObject)
vueObject.$mount()
console.log(vueObject.$el)
document.getElementById('container').appendChild(vueObject.$el);
},`
result is not satisfied. monaco editor is a tiny black box.(5px,5px). Is There something wrong?
RT:
use vue-cli 3.0 Cannot assign to read only property 'exports' of object '#'
First issue! :)
I need to create multiple instances of the editor, but when I try to do that, I get this error:
TypeError: Cannot read property 'addEventListener' of undefined at new t (dom.ts:199) at Object.C [as addDisposableListener] (dom.ts:231) at t.e._beginListening (keybindingServiceImpl.ts:61) at new t (simpleServices.ts:240) at new t (standaloneServices.ts:215) at _ (standaloneEditor.ts:118) at Object.m [as create] (standaloneEditor.ts:65) at VueComponent.createMonaco (eval at <anonymous> (build.js:1620), <anonymous>:127:42) at boundFn (eval at <anonymous> (build.js:761), <anonymous>:127:12) at window.require (eval at <anonymous> (build.js:1650), <anonymous>:15:9)
the :code is the initial code to show . it works only when it renders at the first time.
if I want to change the code , how can I do ?
The error:
TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of Array
at validateString (internal/validators.js:117)
at Module.require (internal/modules/cjs/loader.js:1016)
at require (internal/modules/cjs/helpers.js:77)
at onGotAmdLoader (MonacoLoader.js?3e05:21)
at Object.load (MonacoLoader.js?3e05:57)
at VueComponent.fetchEditor (Monaco.vue?3f8d:114)
at VueComponent.mounted (Monaco.vue?3f8d:25)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
at callHook (vue.runtime.esm.js?2b0e:4235)
at Object.insert (vue.runtime.esm.js?2b0e:3158)
_callee$ @ client.js?1a29:102
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ client.js?1a29:64
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1871
callHook @ vue.runtime.esm.js?2b0e:4235
insert @ vue.runtime.esm.js?2b0e:3158
invokeInsertHook @ vue.runtime.esm.js?2b0e:6390
patch @ vue.runtime.esm.js?2b0e:6609
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3984
eval @ index.js?6435:244
eval @ index.js?6435:242
eval @ index.js?6435:119
eval @ script.vue?8220:29
./renderer/components/editor/script.vue @ app.js:731
__webpack_require__ @ runtime.js:854
hotApplyInternal @ runtime.js:750
hotApply @ runtime.js:412
cb @ process-update.js?e135:76
eval @ process-update.js?e135:91
Promise.then (async)
check @ process-update.js?e135:90
module.exports @ process-update.js?e135:52
processMessage @ client.js?1b93:279
handleMessage @ client.js?1b93:139
handleMessage @ client.js?1b93:102
In your README.md, we should use this component as
<MonacoEditor
height="600"
language="typescript"
:code="code"
:editorOptions="options"
@mounted="onMounted"
@codeChange="onCodeChange"
>
</MonacoEditor>
However, the props "editorOptions" doesn't work.
Then I read your source code and find what we should use is "options" rather than "editorOptions", like this:
<MonacoEditor
height="600"
language="typescript"
:code="code"
:options="options"
@mounted="onMounted"
@codeChange="onCodeChange"
>
</MonacoEditor>
Hope you fix this error in README.md, thanks!
how to formatCode when init data
Do you know how to style this editor? like changing the sidebar where the numbers are, change the background color of the current line, etc.. I imagine we can just overwrite the css coming from the editor, but there's probably a better way.
How can I change the programming language in the dynamic way?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.