JS在线代码编辑器多种方案monaco-editor，vue-monaco-editor

前言

　　JavaScript在线代码编辑器。

　　需要代码提示，关键字高亮，能够格式化代码。（不需要在线运行）

　　简简单单的需求。

源码地址：https://github.com/FannieGirl/vue-monaco-editor

方案一： Monaco-editor

　　简介：微软的开源项目，开源中国上面的在线代码编辑器也是用的这个（我就是顺着藤爬到Monaco editor的）

　　　　　有 ‘在线 VS code’  美称

　　官网：https://microsoft.github.io/monaco-editor/

　　优点：多语言支持，代码提示（内置函数蛮多的）。文档很清晰，API很详细了。更重要的是给出的案例非常多。

　　缺点：一开始摸不着头脑（本人是在vue项目使用），静态资源的引用是魔鬼（官方就是ES5方式资源引用），最好的方案是要搭配 webpack plugin 使用

　　　　　找了那么多的资料，没见几个demo写的好（这也是我要再写一篇的原因啦  争取看到的人都可以快速上手）

　　源码：https://github.com/Microsoft/monaco-editor

　　案例：https://github.com/Microsoft/monaco-editor-samples/  一定要看这个，官方给你展示各种功能（一套git pull 下来，在本地环境直接看demo），

　　　　　鬼知道我走了多少冤枉路。

　　本人案例展示，直接上源码吗？哈哈哈。

 npm install monaco-edtior //安装

 test.vue //新建一个文件
 <template>
     <div ref="container" style="width:800px;height:600px;border:1px solid grey;text-align: left"></div>
 </template>

 <script>
     import * as monaco from "monaco-editor"; // 包体很大了 但是demo可以跑起来

     export default{
         mounted() {
             var editor = monaco.editor.create(this.$refs.container, {
                 value: [
                     'function x() {',
                     '\tconsole.log("Hello world!");',
                     '}'
                 ].join('\n'),
                 language: 'javascript',
                 minimap:{
                     enabled:false
                 },
                 selectOnLineNumbers: true,
                 roundedSelection: false,
                 cursorStyle: 'line', // 光标样式
                 automaticLayout: false, // 自动布局
                 glyphMargin: true, // 字形边缘
                 useTabStops: false,
                 fontSize: 16, // 字体大小
                 autoIndent: false //自动布局
             });
         }
     }
 </script>

JavaScript 参考这个案例！！！

方案二 vue-monaco-editor(没错就是别人集成好的)

　　原因：monaco  按需求加载太难了，官方案例也是在静态资源中引用 node_model中的（地狱来了）

　　针对这个有两种解决方案

　　方案一：资源引用哪家强，就到前端找webpack

　　方案二：本人偷懒，直接用vue-Monaco-editor（Rect 有的）

　　再次上源码，哈哈哈哈哈

　　方案一的源码

npm install monaco-editor-webpack-plugin //安装

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

module.exports = {
    // ......
    configureWebpack: {
        plugins: [
            new MonacoWebpackPlugin({
                // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
                languages: ['javascript', 'css', 'html', 'typescript', 'json']
            })
        ]
    }
};

　　方案二的源码

<template>
    <div id="app">
        <MonacoEditor
                height="300"
                width="1200"
                class="vs"
                style="text-align: left;background-color: #fff"
                language="javascript"
                :code="code"
                :editorOptions="options"
                @mounted="onMounted"
                @codeChange="onCodeChange"
        >
        </MonacoEditor>
    </div>
</template>

<script>
    import MonacoEditor from 'vue-monaco-editor'

    export default {
        data() {
            return {
                code: '',
                editor:null,
                options: {
                    theme: "vs",
                    selectOnLineNumbers: true,
                    roundedSelection: false,
                    readOnly: false,
                    automaticLayout: true,
                    glyphMargin: true,
                    showFoldingControls: "always",
                    formatOnPaste: true,
                    formatOnType: true,
                    folding: true,
                }
            }
        },
        components: {
            MonacoEditor
        },
        methods:{
            onMounted (editor) {

                this.editor = editor;

            },

            onCodeChange(editor) {},
        }
    }
</script>
<style>
</style>

前方有坑

　　同一个项目里面

　　既安装了vue-monaco-editor 又安装了Monaco-editor

　　然后 就不会智能提示了（2333）

这个问题，emmm（稍后解决吧，我再搞codemirror的）

算了codeMirror 再分一篇文章