色在线视频播放,午夜精品久久久久久,国产剧情一区二区

前言

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

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

Monaco Editor 介紹

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

聊聊 VS Code 使用的代碼編輯器

代碼對比

功能

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

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、需要一個渲染編輯器的容器節點，我們設置是一個 id 為 container 的 div：

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

3、在 js 文件中引入 monaco editor, 并創建編輯器：

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'), })

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

聊聊 VS Code 使用的代碼編輯器

效果

常規配置

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

參數	說明	類型	默認值	可選值
value	編輯器的初始值	string	-	-
theme	編輯器的主題樣式,除了提供的可選值外，也可以通過 monaco.editor.defineTheme 自定義主題	string	'vs'	'vs','vs-dark','hc-black'
language	編輯器的初始語言,例如可以設置為 javascript, json 等	string	-	-
model	和編輯器關聯的初始模型	ITextModel	-	-
lineNumbers	控制行數的渲染，如果是 function，那么會使用 return 的內容作為行數展示	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 附帶的所有語言都將包含在內，如果你覺得這樣配置麻煩，可以使用 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' }) // 通過正則注冊解析規則
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', { tokenizer: { root: [ [/\[error.*/, 'custom-error'], [/\[notice.*/, 'custom-notice'], [/\[info.*/, 'custom-info'], [/\[[a-zA-Z 0-9:]+\]/, 'custom-date'], ], }, }) // 定義僅包含與此語言匹配的規則的新主題
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', })

效果：

聊聊 VS Code 使用的代碼編輯器

通過這個例子，我們就可以在網頁實現友好查看在線日志。

在 react 中使用

目前社區已經封裝了 @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