摘要：在文章開始之前先展示一下我自己做的在線編譯器點此預(yù)覽大概三四個月之前我開始有了制作在線編譯器的想法，在此之前我接觸過很多的在線編譯器，如等，這些都非常優(yōu)秀且有著龐大的用戶群體的編譯器。是一個用于瀏覽器的實現(xiàn)的多功能文本編輯器。

在文章開始之前先展示一下我自己做的在線編譯器 JS-Encoder:

點此預(yù)覽

大概三四個月之前我開始有了制作在線編譯器的想法，在此之前我接觸過很多的在線編譯器，如CodePen、JsBin、JsFiddle等，這些都非常優(yōu)秀且有著龐大的用戶群體的編譯器。

我一直對在線編譯器的實現(xiàn)抱有濃厚興趣，這些在線編譯器支持很多種語言，代碼變色，諸多的快捷鍵以及一些個性化設(shè)置，這使得在線編譯器看上去和我們在本地下載的編譯器軟件也不會有太大的區(qū)別，我完全不知道這些復(fù)雜的功能要怎么實現(xiàn)，于是我觀察 CodePen 和 JsBin 代碼發(fā)現(xiàn)他倆都使用了一個叫 codemirror 的工具。

codemirror 是一個用于瀏覽器的 JavaScript 實現(xiàn)的多功能文本編輯器。它專門用于編輯代碼，并帶有許多語言模式和插件 ，可實現(xiàn)更高級的編輯功能。

原來這些編譯器是依靠 codemirror 來實現(xiàn)的，codemirror 是一個非常復(fù)雜的工具，以至于我花了兩天時間才熟悉它的配置項。codemirror 本身是采用直接操作 DOM 的方式，而我的項目是使用 Vue + Webpack 構(gòu)建的，這違反了 Vue 數(shù)據(jù)驅(qū)動 的宗旨，于是我在 npm 上發(fā)現(xiàn)了 vue-codemirror 這個工具，采用 Vue 的方式構(gòu)建代碼編輯器

codemirror 有許多配置項，我在自己的項目中用到了如下配置，如果你想看全部配置，可以看這里

cmOptions: {
        // codemirror config
        flattenSpans: false, // 默認(rèn)情況下，CodeMirror會將使用相同class的兩個span合并成一個。通過設(shè)置此項為false禁用此功能
        tabSize: 2, // tab縮進空格數(shù)
        mode: "", // 模式
        theme: "monokai", // 主題
        smartIndent: true, // 是否智能縮進
        lineNumbers: true, // 顯示行號
        matchBrackets: true, // 匹配符號
        lineWiseCopyCut: true, // 如果在復(fù)制或剪切時沒有選擇文本，那么就會自動操作光標(biāo)所在的整行
        indentWithTabs: true, // 在縮進時，是否需要把 n*tab寬度個空格替換成n個tab字符
        electricChars: true, // 在輸入可能改變當(dāng)前的縮進時，是否重新縮進
        indentUnit: 2, // 縮進單位，默認(rèn)2
        autoCloseTags: true, // 自動關(guān)閉標(biāo)簽
        autoCloseBrackets: true, // 自動輸入括弧
        foldGutter: true, // 允許在行號位置折疊
        cursorHeight: 1, // 光標(biāo)高度
        keyMap: "sublime", // 快捷鍵集合
        extraKeys: {
          "Ctrl-Alt": "autocomplete",
          "Ctrl-Q": cm => {
            cm.foldCode(cm.getCursor())
          }
        }, //智能提示
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], // 用來添加額外的gutter
        styleActiveLine: true // 激活當(dāng)前行樣式
      },

這些配置只是一小部分，但足夠?qū)崿F(xiàn)我想要的功能了

mode 表示當(dāng)前編輯器使用的語言

theme 表示編輯器使用的配色，官方支持很多種配色，但確沒有配色預(yù)覽，所以我直接使用我熟悉的 monokai 作為主題，因為我比較喜歡 vscode 的配色，所以我找到 monokai.css 文件并修改了許多樣式，雖然最后還是和真正的 vscode 主題有差異，但我真的盡力了