monaco editor 代码高亮编辑器

最新推荐文章于 2025-05-01 02:36:07 发布

原创最新推荐文章于 2025-05-01 02:36:07 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #javascript #webpack

VUE 专栏收录该内容

56 篇文章

订阅专栏

该文章展示了一个Vue组件`MonacoEditor.vue`的实现，利用`monaco-editor`和`monaco-editor-webpack-plugin`，提供了代码编辑器功能，支持设置语言（如CSharp）、主题、字体大小等选项，并实现了编辑器的监听、更新、撤销、重做等功能。组件还监听了窗口缩放事件，确保布局适应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

monaco editor 版本号

“monaco-editor”: “^0.20.0”,
“monaco-editor-webpack-plugin”: “^4.1.1”,

写成单另的组件monaco-editor.vue

<template>
	<div ref="editor" class="main" style="height: 400px"></div>
</template>

<script>
import * as monaco from "monaco-editor";
export default {
	props: {
		options: {
			type: Object,
			default() {
				return {};
			},
		},
		value: {
			type: String,
			required: false,
		},
		language: {
			type: String,
		},
		hints: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	name: "MonacoEditor",
	data() {
		return {
			editorInstance: null,
			defaultOptions: {
				theme: "vs-dark",
				fontSize: 14,
			},
		};
	},
	watch: {
		value() {
			if (this.value !== this.editorInstance.getValue()) {
				this.editorInstance.setValue(this.value);
			}
		},
	},
	mounted() {
		this.initEditor();
		global[this.editorInstance._id] = this;
		window.addEventListener("resize", () => this.layout);
	},
	destroyed() {
		this.editorInstance.dispose();
		global[this.editorInstance._id] = null;
		window.addEventListener("resize", () => this.layout);
	},
	methods: {
		layout() {
			this.editorInstance.layout();
		},
		undo() {
			this.editorInstance.trigger("anyString", "undo");
			this.onValueChange();
		},
		redo() {
			this.editorInstance.trigger("anyString", "redo");
			this.onValueChange();
		},
		getOptions() {
			let props = { value: this.value };
			this.language !== undefined && (props.language = this.language);
			let options = Object.assign({}, this.defaultOptions, this.options, props);
			return options;
		},
		onValueChange() {
			this.$emit("input", this.editorInstance.getValue());
			this.$emit("change", this.editorInstance.getValue());
		},
		//获取光标位置
		getPosition() {
			return this.editorInstance.getPosition();
		},
		//光标位置插入数据
		insertTextPosition(position, newPosition, text) {
			this.editorInstance.executeEdits("my-source", [
				{
					range: new monaco.Range(position.lineNumber, position.column, newPosition.lineNumber, newPosition.column),
					text,
				},
			]);
			//修改光标位置
			this.editorInstance.setPosition(newPosition);
		},
		initEditor() {
			this.MonacoEnvironment = {
				getWorkerUrl: function () {
					return "./editor.worker.bundle.js";
				},
			};

			this.editorInstance = monaco.editor.create(this.$refs.editor, this.getOptions());
			this.editorInstance.onContextMenu((e) => {
				this.$emit("contextmenu", e);
			});
			this.editorInstance.onDidChangeModelContent(() => {
				this.onValueChange();
			});
			//ctrl + s 保存
			this.editorInstance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, () => {
				this.$emit("save", this.editorInstance.getValue());
			});
		},
	},
};
</script>

<style scoped>
.main /deep/ .view-lines * {
	font-family: Consolas, "Courier New", monospace !important;
}
/* :deep(.monaco-editor){
    color: #d4d4d4;
    width: 100% !important;
    height: 400px !important;
} */
</style>

</script>

<style scoped>
.main /deep/ .view-lines * {
	font-family: Consolas, "Courier New", monospace !important;
}
</style>

调用组件

<monaco-editor v-model.trim="validationRules" language="csharp" style="height: 700px" v-if="drawerFlag" @save="checkClick" />
<script>
import MonacoEditor from "@/components/monaco-editor/monaco-editor.vue";
export default {
	components: { MonacoEditor },
}
</script>

注意：v-if=“drawerFlag” 是为了防止高度消失