min-editor

install

npm install min-editor -S

libariry

npm i copy-webpack-plugin

vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin({
        publicPath: "/"
      }),
      new CopyWebpackPlugin(
        [
          {
            from: 'node_modules/min-editor/lib/editor.worker.js',
            to: 'static/js/editor.worker.js',
            toType: 'file'
          },
          {
            from: 'node_modules/min-editor/lib/html.worker.js',
            to: 'static/js/html.worker.js',
            toType: 'file'
          },
          {
            from: 'node_modules/min-editor/lib/css.worker.js',
            to: 'static/js/css.worker.js',
            toType: 'file'
          },
          {
            from: 'node_modules/min-editor/lib/ts.worker.js',
            to: 'static/js/ts.worker.js',
            toType: 'file'
          },
          {
            from: 'node_modules/min-editor/lib/json.worker.js',
            to: 'static/js/json.worker.js',
            toType: 'file'
          },
          {
            context: 'node_modules/min-editor/lib/',
            from: '*.umd.min.*.js',
            to: 'static/js/',
            toType: 'dir'
          },

          {
            context: 'node_modules/min-editor/lib/static/',
            from: 'fonts',
            to: 'static/js/fonts',
            toType: 'dir'
          }
        ])
    ]
  },

examples

js

// import
import MinEditor from "min-editor";
import "min-editor/lib/MinEditor.css"; 
export default {
  name: "App",
  components: {
    MinEditor // register components
  },data(){
      return{
          mode: "html",
          theme: "vs-dark", // theme:[ vs | vs-dark | hc-black ]
          content: [
            "function test(){",
            '\tconsole.log("hellow world");',
            "}",
          ].join("\n"),
      }
  }
};

template

<MinEditor ref="editor" :value.sync="content" :mode="mode" :theme="theme"></MinEditor>