Code Monkey home page Code Monkey logo

vue-monaco-editor's Introduction

vue-monaco-editor

!!!! This is not maintained !!!!

Monaco Editor Vue Component

Based off React Monaco Editor

experimental

Setup

npm install vue-monaco-editor --save

Simple Vue Use

import MonacoEditor from 'vue-monaco-editor'

// use in component
export default {
  components: {
    MonacoEditor
  }
}

Component Props

Option Type Default Description
language String javascript
height Number/String 100%
width Number/String 100%
code String // code \n Initial code to show
theme String vs-dark vs, hc-black, or vs-dark
highlighted Array[Object] [{ number: 0, class: ''}] Lines to highlight with numbers and .classes
changeThrottle Number(ms) 0 throttle codeChange emit
srcPath String "" see Webpack Use below
editorOptions Object Merged with defaults below See Monaco Editor Options

Editor Default Options

defaults: {
  selectOnLineNumbers: true,
  roundedSelection: false,
  readOnly: false,
  cursorStyle: 'line',
  automaticLayout: false,
  glyphMargin: true
}

Component Events

These events are available to parent component

Event Returns Description
mounted editor[editor instance] Emitted when editor has mounted
codeChange editor[editor instance] Emitted when code has changed

Example

Component Implementation

<MonacoEditor
    height="600"
    language="typescript"
    :code="code"
    :editorOptions="options"
    @mounted="onMounted"
    @codeChange="onCodeChange"
    >
</MonacoEditor>

Parent

module.exports = {
  components: {
    Monaco
  },
  data() {
    return {
      code: '// Type away! \n',
      options: {
        selectOnLineNumbers: false
      }
    };
  },
  methods: {
    onMounted(editor) {
      this.editor = editor;
    },
    onCodeChange(editor) {
      console.log(editor.getValue());
    }
  }
};

Webpack Use

By default, monaco-editor is loaded from a cdn asyncronously using require. To use a local copy of monaco-editor with webpack, we need to expose the dependency in our build directory:

npm install copy-webpack-plugin --save-dev

Add this to your webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'node_modules/monaco-editor/min/vs',
        to: 'vs',
      }
    ])
  ]
};

Then, specify the build directory path in the srcPath prop. See src/App.vue for an example.

Dev Use

git clone [this repo] .
npm install
npm run dev

Edit src/App.vue

vue-monaco-editor's People

Contributors

matt-oconnell avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

vue-monaco-editor's Issues

vue-cli 3.0

RT:
use vue-cli 3.0 Cannot assign to read only property 'exports' of object '#'

How to create vue-monaco-editor during runtime?

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?

Unexpected token punc «(», expected punc «:»

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]

use options instead of editorOptions

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!

Hello, I followed the tutorial and found the error, error and code as follows.

image

<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>

How can I modify theme by select box?

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..

how to change the code

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 ?

Apply changeThrottle to the provided change handler

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

Cannot Create Multiple Instances

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)

Upgrade to latest version

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

styling?

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.

Error when using in nuxt + electron

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.