前言

有時候我們會有在需要在網(wǎng)頁中寫代碼或者改代碼配置的需求，這個時候就需要用到代碼編輯器，常規(guī)的代碼編輯器有 CodeMirror 和 Monaco Editor， CodeMirror 使用的人比較多，主要因為比較輕量，核心文件壓縮后僅 70+ KB，根據(jù)所需要支持的語言按需打包，目前 CodeMirror 6 已經(jīng)完全重構(gòu)。它支持觸摸屏并且極大地提高了庫的可訪問性。

另一個優(yōu)秀的庫就是 Monaco Editor，它比較重量級，但功能卻十分優(yōu)秀，本文主要介紹下 Monaco Editor 的用法。

Monaco Editor 介紹

Monaco Editor 是 VS code 使用的編輯器，支持豐富的代碼格式，擁有良好的可擴展性，支持代碼并排對比編輯器，并且友好的支持視覺障礙人士，擁有語音播報功能，但 Monaco Editor 在移動 web 中卻不支持。

代碼對比

功能

對以下語言支持代碼感知和驗證：

TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML。

對以下語法支持代碼高亮：

XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C。

基本使用

1、 首先安裝 monaco-editor：

npm install monaco-editor

2、需要一個渲染編輯器的容器節(jié)點，我們設(shè)置是一個 id 為 container 的 div：

<div id="container" style="height: 100%">div>

3、 在 js 文件中引入 monaco editor, 并創(chuàng)建編輯器：

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js' monaco.editor.create(document.getElementById('container'), { value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'), })

打開瀏覽器，我們可以看到編輯器已經(jīng)成功展示出來：

效果

常規(guī)配置

我們可以在 create 的第二個參數(shù)傳遞一個 option 參數(shù)。

在 webpack 中使用

JS 代碼：

import * as monaco from 'monaco-editor' self.MonacoEnvironment = { getWorkerUrl: function (moduleId, label) { if (label === 'json') { return './json.worker.bundle.js' } if (label === 'css' || label === 'scss' || label === 'less') { return './css.worker.bundle.js' } if (label === 'html' || label === 'handlebars' || label === 'razor') { return './html.worker.bundle.js' } if (label === 'typescript' || label === 'javascript') { return './ts.worker.bundle.js' } return './editor.worker.bundle.js' }, } monaco.editor.create(document.getElementById('container'), { value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'), language: 'javascript', })

然后需要在 webpack 入口添加配置：

module.exports = { mode: 'development', entry: { app: './index.js', 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js', 'json.worker': 'monaco-editor/esm/vs/language/json/json.worker', 'css.worker': 'monaco-editor/esm/vs/language/css/css.worker', 'html.worker': 'monaco-editor/esm/vs/language/html/html.worker', 'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { globalObject: 'self', filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.ttf$/, use: ['file-loader'], }, ], }, }

上述加載方式是 ESM 的加載方式，默認情況下，monaco editor 附帶的所有語言都將包含在內(nèi)，如果你覺得這樣配置麻煩，可以使用 monaco-editor-webpack-plugin，通過只選擇特定的語言或者只選擇特定的編輯器特性，這樣可以用來生成一個更小的編輯器包。

修改 webpack.config.js ，在 languages 填寫只包含支持的語言子集。

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') const path = require('path') module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js', }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.ttf$/, use: ['file-loader'], }, ], }, plugins: [ new MonacoWebpackPlugin({ languages: ['typescript', 'html', 'css'], }), ], }

值獲取

editor.getValue()

獲取編輯器中的所有文本，并生成一個字符串返回，會保留所有信息(換行、縮進、注釋等等)。

editor.getSelection()

獲取編輯器中被選中文案的 range ，返回一個對象，如下：

{ "startLineNumber": 0, "startColumnNumber": 0, "endLineNumber": 0, "endColumnNumber": 0 }

自定義語言

monaco editor 還可以支持自定義語言，下面代碼演示一個日志的編輯器：

// 注冊一個語言
monaco.languages.register({ id: 'mySpecialLanguage' }) // 通過正則注冊解析規(guī)則
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', { tokenizer: { root: [ [/\[error.*/, 'custom-error'], [/\[notice.*/, 'custom-notice'], [/\[info.*/, 'custom-info'], [/\[[a-zA-Z 0-9:]+\]/, 'custom-date'], ], }, }) // 定義僅包含與此語言匹配的規(guī)則的新主題
monaco.editor.defineTheme('myCoolTheme', { base: 'vs', inherit: false, rules: [ { token: 'custom-info', foreground: '808080' }, { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' }, { token: 'custom-notice', foreground: 'FFA500' }, { token: 'custom-date', foreground: '008800' }, ], colors: { 'editor.foreground': '#000000', }, }) // 注冊新語言的代碼提示
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', { provideCompletionItems: () => { var suggestions = [ { label: 'simpleText', kind: monaco.languages.CompletionItemKind.Text, insertText: 'simpleText', }, { label: 'testing', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'testing(${1:condition})', insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, }, { label: 'ifelse', kind: monaco.languages.CompletionItemKind.Snippet, insertText: ['if (${1:condition}) {', '\t$0', '} else {', '\t', '}'].join('\n'), insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'If-Else Statement', }, ] return { suggestions: suggestions } }, }) monaco.editor.create(document.getElementById('container'), { theme: 'myCoolTheme', value: getCode(), language: 'mySpecialLanguage', })

效果：

通過這個例子，我們就可以在網(wǎng)頁實現(xiàn)友好查看在線日志。

在 react 中使用

目前社區(qū)已經(jīng)封裝了 @monaco-editor/react， 而且不需要使用 webpack (或 rollup/parcel/etc)配置文件/插件。

import React from 'react' import Editor from '@monaco-editor/react' function App() { return <Editor height="90vh" defaultLanguage="javascript" defaultValue="http:// some comment" /> } export default App

詳情請參考倉庫 npm[1]。

應(yīng)用

tailwindcss 的在線運行網(wǎng)站就 https://play.tailwindcss.com/ 就是使用了 monaco-editor 并且擁有智能的語法提示，代碼是開源的。

小結(jié)

本文簡單介紹了下 monaco-editor，當(dāng)然還有很多高級功能等待著我們?nèi)ヌ剿骱屯诰颍?文中羅列并不全面，深入挖掘請大家參考官網(wǎng)[2]和Github[3] ，希望在未來的開發(fā)中能夠快速上手類似的代碼編輯器實現(xiàn)。

參考資料

[1]npm: https://www.npmjs.com/package/@monaco-editor/react

[2]官網(wǎng): https://microsoft.github.io/monaco-editor/

[3]Github: https://github.com/microsoft/monaco-editor

原文地址:https://mp.weixin.qq.com/s/ORTjXMFij9KxMDWNkxF_bQ