建站
咨詢
售后
建站咨詢
新聞中心
前言
另一個優(yōu)秀的庫就是 Monaco Editor，它比較重量級，但功能卻十分優(yōu)秀，本文主要介紹下 Monaco Editor 的用法。
十年的新巴爾虎右網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整新巴爾虎右建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“新巴爾虎右網(wǎng)站設(shè)計”,“新巴爾虎右網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
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：
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ù)。
|
參數(shù) |
說明 |
類型 |
默認值 |
可選值 |
|
value |
編輯器的初始值 |
string |
- |
- |
|
theme |
編輯器的主題樣式,除了提供的可選值外，也可以通過 monaco.editor.defineTheme 自定義主題 |
string |
'vs' |
'vs','vs-dark','hc-black' |
|
language |
編輯器的初始語言,例如可以設(shè)置為 javascript, json 等 |
string |
- |
- |
|
model |
和編輯器關(guān)聯(lián)的初始模型 |
ITextModel |
- |
- |
|
lineNumbers |
控制行數(shù)的渲染，如果是 function，那么會使用 return 的內(nèi)容作為行數(shù)展示 |
string/Function |
'on' |
'on','off','relative', 'interval', '(lineNumber: number) => string' |
|
readOnly |
控制編輯器是否只讀 |
boolean |
false |
- |
|
autoClosingBrackets |
自動閉合括號 |
string |
'languageDefined' |
'always'/'languageDefined'/'beforeWhitespace'/'never' |
|
autoClosingOvertype |
自動閉合括號或引號 |
string |
- |
'always'/'auto'/'never' |
|
autoClosingQuotes |
自動閉合引號 |
string |
'languageDefined' |
'always'/'languageDefined'/'beforeWhitespace'/'never' |
|
autoIndent |
自動縮進 |
string |
'advanced' |
'none'/'keep'/'brackets'/'advanced'/'full' |
在 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
}
export default App
詳情請參考倉庫 npm[1]。
應用
tailwindcss 的在線運行網(wǎng)站就 https://play.tailwindcss.com/ 就是使用了 monaco-editor 并且擁有智能的語法提示，代碼是開源的。
小結(jié)
本文簡單介紹了下 monaco-editor，當然還有很多高級功能等待著我們?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
文章題目：聊聊VSCode使用的代碼編輯器
URL標題：http://www.5511xx.com/article/dhosdop.html
