百花齊放，終歸還是要統(tǒng)一
前序：
碎碎念：
- 此文個人筆記份名，官網(wǎng)文檔搬運
- monaco 版本：0.30.0
- monaco-editor-webpack-plugin 版本：6.0.0 （僅適合模塊引入方式）
- vue 版本：2.6.11
一：步驟：
2 —— 引入開發(fā)組件【monaco】
1 —— 模塊引入monaco（非推薦模式掸屡，編譯慢折磨人）：
npm install monaco-editor
npm install monaco-editor-webpack-plugin --dev
1.1 —— 編輯vue.config.js：
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
// 省略N多個設置寸莫，請勿直接復制使用状蜗，僅展示Monaco需要的以及基本結構
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({
languages: ['javascript', 'yaml', 'json', 'xml']
})
],
}
}
1.2 —— 創(chuàng)建editor組件：
<template>
<div ref="CodeEditor"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
props: {
editable: { type: Boolean, default: true },
language: { type: String, default: 'plaintext' },
value: { type: String, required: true, default: '' },
},
data() {
return {
codeEditor: null,
}
},
mounted() {
this.updateEditor(this.value)
},
methods: {
updateEditor(content) {
if (!this.codeEditor) {
monaco.editor.defineTheme('myTheme', {
base: 'vs',
inherit: true,
rules: [{ background: 'EDF9FA' }],
colors: {
'editor.foreground': '#000000',
'editor.background': '#EDF9FA',
'editorCursor.foreground': '#8B0000',
'editor.lineHighlightBackground': '#0000FF20',
'editorLineNumber.foreground': '#008800',
'editor.selectionBackground': '#88000030',
'editor.inactiveSelectionBackground': '#88000015',
},
})
monaco.editor.setTheme('myTheme')
this.codeEditor = monaco.editor.create(this.$refs.CodeEditor, {
value: '',
language: this.language,
lineNumbers: 'off',
roundedSelection: false,
scrollBeyondLastLine: false,
readOnly: !this.editable,
theme: 'vs-dark',
automaticLayout: true,
wordWrap: 'wordWrapColumn',
wordWrapColumn: 40,
// Set this to false to not auto word wrap minified files
wordWrapMinified: true,
// try "same", "indent" or "none"
wrappingIndent: 'indent',
scrollbar: {
// Subtle shadows to the left & top. Defaults to true.
useShadows: false,
// Render vertical arrows. Defaults to false.
verticalHasArrows: false,
// Render horizontal arrows. Defaults to false.
horizontalHasArrows: false,
// Render vertical scrollbar.
// Accepted values: 'auto', 'visible', 'hidden'.
// Defaults to 'auto'
vertical: 'auto',
// Render horizontal scrollbar.
// Accepted values: 'auto', 'visible', 'hidden'.
// Defaults to 'auto'
horizontal: 'auto',
verticalScrollbarSize: 10,
horizontalScrollbarSize: 10,
arrowSize: 10,
},
//小地圖
minimap: {
enabled: false,
},
})
this.codeEditor.onDidChangeModelContent(() => {
this.$emit('input', this.codeEditor.getValue())
})
}
if (content != this.codeEditor.getValue())
this.codeEditor.setValue(content)
this.codeEditor.updateOptions({
readOnly: !this.editable,
})
},
},
watch: {
value: function (val) {
this.updateEditor(val)
},
},
beforeDestroy() {
this.codeEditor.dispose()
},
}
</script>
1.3 —— 組件調用：
<template>
<CodeEditor
v-model="content"
:language="language"
/>
</template>
<script>
import CodeEditor from '@/components/CodeEditor.vue'
export default {
components: { CodeEditor },
data() {
return {
content: '瀟風劍易水',
language: '',
}
},
}
</script>
2 —— 靜態(tài)引入monaco（首選模式）：
2.1 —— 創(chuàng)建editor組件：
<template>
<div style="width: 100%; height: 300px" ref="editor"></div>
</template>
<script>
export default {
props: {
editable: { type: Boolean, default: true },
language: { type: String, default: "plaintext" },
value: { type: String, default: "" },
},
data() {
return {
editor: null,
};
},
created() {
// CDN引入（鏈接源自官方demo）
let src =
"https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/loader.js";
// public 引入
// let src = 'monaco-editor/min/vs/loader.js';
this.toCreateScript(src);
},
mounted() {
this.updateEditor(this.value);
},
watch: {
value: function (val) {
this.updateEditor(val);
},
},
methods: {
loader() {
// 需要使用的是requirejs去加載AMD格式的monaco丧裁，而非node的require模塊
// loader.js負責裝載window.require掉蔬，也可以單獨使用requirejs而非自帶的loader.js去加載
// 不要修改monaco-editor/min/vs路徑，除非改源碼浓瞪，該版本的MonacoEnvironment不起作用懈玻，worker.main.js里面自維護的變量取的不是外面的
let require = window.require;
// CDN引入（鏈接源自官方demo）
let vsPath =
"https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs";
// public 引入
// let vsPath = "monaco-editor/min/vs"
require.config({ paths: { vs: vsPath } });
require(["vs/editor/editor.main"], () => this.toCreate());
},
toCreate() {
if (!this.editor) {
monaco.editor.defineTheme("myTheme", {
base: "vs",
inherit: true,
rules: [{ background: "EDF9FA" }],
colors: {
"editor.foreground": "#000000",
"editor.background": "#EDF9FA",
"editorCursor.foreground": "#8B0000",
"editor.lineHighlightBackground": "#0000FF20",
"editorLineNumber.foreground": "#008800",
"editor.selectionBackground": "#88000030",
"editor.inactiveSelectionBackground": "#88000015",
},
});
monaco.editor.setTheme("myTheme");
this.editor = monaco.editor.create(this.$refs.editor, {
value: "",
language: this.language,
lineNumbers: "off",
roundedSelection: false,
scrollBeyondLastLine: false,
readOnly: !this.editable,
theme: "vs-dark",
automaticLayout: true,
wordWrap: "wordWrapColumn",
wordWrapColumn: 40,
// Set this to false to not auto word wrap minified files
wordWrapMinified: true,
// try "same", "indent" or "none"
wrappingIndent: "indent",
scrollbar: {
// Subtle shadows to the left & top. Defaults to true.
useShadows: false,
// Render vertical arrows. Defaults to false.
verticalHasArrows: false,
// Render horizontal arrows. Defaults to false.
horizontalHasArrows: false,
// Render vertical scrollbar.
// Accepted values: 'auto', 'visible', 'hidden'.
// Defaults to 'auto'
vertical: "auto",
// Render horizontal scrollbar.
// Accepted values: 'auto', 'visible', 'hidden'.
// Defaults to 'auto'
horizontal: "auto",
verticalScrollbarSize: 10,
horizontalScrollbarSize: 10,
arrowSize: 10,
},
//小地圖
minimap: {
enabled: false,
},
});
this.editor.onDidChangeModelContent(() => {
this.$emit("input", this.editor.getValue());
});
}
},
toCreateScript(src) {
let head = document.querySelector("head");
let script = document.createElement("script");
script.onload = () => this.loader();
script.onerror = () => {
head.removeChild(script);
};
script.src = src;
head.appendChild(script);
},
updateEditor(content) {
if (this.editor) {
if (content != this.editor.getValue()) this.editor.setValue(content);
this.editor.updateOptions({
readOnly: !this.editable,
});
}
},
},
};
</script>
2.1.1 —— 若public引入請先下載對應的資源：
- 官網(wǎng)下載鏈接
- npm 引入monaco包追逮，對應的位置是node_modules/monaco-editor/min/vs
- 下載官網(wǎng)demo鏈接那些js（麻煩酪刀，不夠全）
2.2 —— 組件調用：
<template>
<CodeEditor
v-model="content"
:language="language"
/>
</template>
<script>
import CodeEditor from '@/components/CodeEditor.vue'
export default {
components: { CodeEditor },
data() {
return {
content: '瀟風劍易水',
language: '',
}
},
}
</script>
二：常見問題：
1 —— 待更：
三：吹水：
1 官網(wǎng)的文檔并不是很好粹舵，例子多钮孵，但是有些是提及又缺少一些指引，然后就是api文檔眼滤，這個很多沒有具體的東西巴席，有些深的自定義需要自己去看代碼才知曉，不同版本的配置有點大诅需，網(wǎng)上的案例涉及的配置也很多不適用漾唉，本文也僅僅針對這個版本的，但是相對來說還是可用
2 模塊引入需要大幅度調整按需引入堰塌，否則即使webpack那個插件排除一些語言赵刑，還是編譯過久，目前僅推薦靜態(tài)引入场刑，非模塊引入般此，且這種不太涉及業(yè)務的不該由業(yè)務所在的模塊管理里面，應該獨立出去
