matt-oconnell / vue-monaco-editor Goto Github PK

View Code? Open in Web Editor NEW

251.0 4.0 58.0 41 KB

Monaco Editor Vue Component

License: MIT License

HTML 2.28% Vue 56.46% JavaScript 41.26%

vue editor editor-plugin monaco-editor

vue-monaco-editor's Introduction

vue-monaco-editor

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

Monaco Editor Vue Component

Based off React Monaco Editor

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

Stargazers

Watchers

Forkers

totomobile43 comozilla loomnetwork apalaniuk tronsfey yutiansut lee182 timoschwarzer go886 webia1 gukun00 nirvana14 vitaliy-madonov tangxuke oneday-oneday chengwenwen22 liyann mukaiu vincentfintend linecode usophia lin2014l2 tonyknn codeinmyself open-javascripts artskin alisanguo cangshudada itheimahf lin-study icefoxs bedus-creation shaipe zijjj katemanx chunlei leemotive tipfurion ledaishu jason-cambell yujiaao kongmengyiyu 511045431wo 5bug ydpfe selfdown wjw666777 yzbest111 joncv dingdingdingyinyinyin abctau hmadf wanghaha-dev garydu0123 cgb-online-develop

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!

I need help && Component doesn‘t render

In parent component

In child component

Why there is no editor but it has its location ?

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

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

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

window.require is null in chrome

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 ?

Why is JS loaded from as.alipayobjects.com?

That makes the Monaco editors web workers not work!

Change language programing?

How can I change the programming language in the dynamic way?

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

Diff Editor

support Diff Editor ?

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