Vue cli2.0 項目中使用Monaco Editor編輯器

monaco-editor 是微軟出的一條開源web在線編輯器
支持多種語言，代碼高亮，代碼提示等功能，與Visual Studio Code 功能幾乎相同。

在項目中可能會用帶代碼編輯功能，或者展示代碼。對於習慣使用vsCode的開發者來說使用monaco-editor是非常不錯的選擇。

安裝依賴

cnpm install monaco-editor --save

cnpm install monaco-editor-webpack-plugin --save-dev //webpack 4.x 以上版本不需要執行此命令

修改webpack.base.conf.js配置文件,如圖：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
...

module.exports = {
  ...
  plugins: [
    ...
    new MonacoWebpackPlugin()
  ]
};

 

editor組件

<template>
    <div class="myEditor">
        <p>
            <el-button type="success" icon="el-icon-check" circle @click="RunResult"></el-button>
            <span class="theme" style="float:right">
                <el-select v-model="theme" size="mini" @change="themeChange" placeholder="請選擇主題">
                    <el-option
                        v-for="item in themeOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </p>
        <div id="container" ref="container" style="height:600px"></div>
    </div>
</template>
<script>
import * as monaco from 'monaco-editor';
export default {
    props:{
        codes:{
            type:String,
            default:function(){
                return '<div>請編輯html內容</div>'
            }
        },
        language:{
            type:String,
            default:function(){
                return 'html'
            }
        },
        editorOptions:{
            type:Object,
            default:function(){
                return {
                    selectOnLineNumbers: true,
                    roundedSelection: false,
                    readOnly: false,		// 只讀
                    cursorStyle: 'line',		//光標樣式
                    automaticLayout: false,	//自動布局
                    glyphMargin: true,  //字形邊緣
                    useTabStops: false,
                    fontSize: 28,		//字體大小
                    autoIndent:true,//自動布局
                    //quickSuggestionsDelay: 500,	//代碼提示延時
                }
            }
        }
    },
    data(){
        return{
            themeOption:[
                {
                    value:'vs',
                    label:'默認'
                },
                {
                    value:'hc-black',
                    label:'高亮'
                },
                {
                    value:'vs-dark',
                    label:'深色'
                },
            ],
            theme:'hc-black',
            codesCopy:null,//內容備份
        }
    },
    mounted(){
        this.initEditor();
    },
    methods:{
        initEditor(){
            let self = this;
            self.$refs.container.innerHTML = '';
            self.monacoEditor = monaco.editor.create(self.$refs.container, {
                value:self.codesCopy || self.codes,
                language: self.language,
                theme: self.theme,//vs, hc-black, or vs-dark
                editorOptions:self.editorOptions,
            });
            self.$emit('onMounted',self.monacoEditor);//編輯器創建完成回調
            self.monacoEditor.onDidChangeModelContent(function(event){//編輯器內容changge事件
                self.codesCopy = self.monacoEditor.getValue();
                self.$emit('onCodeChange',self.monacoEditor.getValue(),event);
            });
            //編輯器隨窗口自適應
            window.addEventListener('resize',function(){
                initEditor();
            })
        },
        RunResult(){
            console.log(this.monacoEditor.getValue());
        },
        themeChange(val){
            this.initEditor();
        }
    }
}
</script>
<style scoped>
    #container{
        height:100%;
        text-align: left;
    }
</style>

　　

引用editor組件

<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane :lazy="true">
        <span slot="label"><i class="el-icon-document"></i> HTML</span>
        <MyEditor
          :language="'html'"
          :codes="htmlCodes"
          @onMounted="htmlOnMounted"
          @onCodeChange="htmlOnCodeChange" />
      </el-tab-pane>
      <el-tab-pane label="Javascript" :lazy="true">
        <MyEditor
          :language="'javascript'"
          :codes="javascriptCodes"
          @onMounted="javascriptOnMounted"
          @onCodeChange="javascriptOnCodeChange" />
      </el-tab-pane>
      <el-tab-pane label="CSS" :lazy="true">
        <MyEditor
          :language="'css'"
          :codes="cssCodes"
          @onMounted="cssOnMounted"
          @onCodeChange="cssOnCodeChange" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
 import MyEditor from './myEditor'
export default {
  components:{
    MyEditor
  },
  data () {
    return {
      htmlCodes:'<div>This is html</div>',
      javascriptCodes:'console.log("This is javascript")',
      cssCodes:'body{}',
      htmlEditor:null,
      jsEditor:null,
      cssEditor:null,
    }
  },
  methods:{
    htmlOnMounted(edit){
      this.htmlEditor = edit;
    },
    javascriptOnMounted(edit){
      this.jsEditor = edit;
    },
    cssOnMounted(edit){
      this.cssEditor = edit;
    },
    htmlOnCodeChange(value,event){},
    javascriptOnCodeChange(value,event){},
    cssOnCodeChange(value,event){},
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

效果圖如下：