Vue3中使用Monaco Editor代码编辑器记录～持续更新

Vue3中使用Monaco Editor代码编辑器记录～持续更新

因为毕设需要用到代码编辑器，根据调研，我选择使用monaco-editor代码编辑器

前端框架使用Vue3+elementUI

monaco-editor插件版本@0.30.1

monaco-editor-webpack-plugin插件版本@6.0.0

注意：monaco-editor和monaco-editor-webpack-plugin版本问题

具体可查看monaco-editor和monaco-editor-webpack-plugin版本对应

安装

npm install monaco-editor@0.30.1 --savenpm install monaco-editor-webpack-plugin@6.0.0 --save

引入

// vue.config.jsconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')module.exports = {configureWebpack: {plugins: [new MonacoWebpackPlugin()]}}

// MonacoEditor.vue(需要使用monaco-editor的页面)import * as monaco from 'monaco-editor'

使用

1. MonacoEditor初始化

<div id="codeEditBox"></div>

import * as monaco from 'monaco-editor'import {ref, toRaw } from 'vue'import $ from 'jquery'export default{setup() {const editor = ref(null)const initEditor = () => {// 初始化编辑器，确保dom已经渲染editor.value = monaco.editor.create(document.getElementById('codeEditBox'), {value: '', //编辑器初始显示文字language: 'python', //此处使用的python，其他语言支持自行查阅demotheme: 'vs-dark', //官方自带三种主题vs, hc-black, or vs-darkselectOnLineNumbers: true,//显示行号roundedSelection: false,readOnly: false, // 只读cursorStyle: 'line', //光标样式automaticLayout: true, //自动布局glyphMargin: true, //字形边缘useTabStops: false,fontSize: 15, //字体大小autoIndent: true, //自动布局quickSuggestionsDelay: 100, //代码提示延时});// 监听值的变化editor.value.onDidChangeModelContent((val) => {console.log(val.changes[0].text)})}$(document).ready(function () {initEditor()})return {editor,}},}

#codeEditBox {width:100%;height:200px;}

2. 获取编辑器中的文本

<el-button @click="handleValue">点击获取值</el-button><div>{{ content }}<div>

import * as monaco from 'monaco-editor'import {ref, toRaw } from 'vue'import $ from 'jquery'export default{setup() {const content = ref("")const handleValue = () => {content.value = toRaw(editor.value).getValue()}return {content}},}

3. 切换主题

<el-select v-model="editorTheme" placeholder="设置主题" @change="handleTheme"><el-option label="Visual Studio Dark" value="vs-dark"></el-option><el-option label="Visual Studio" value="vs"></el-option><el-option label="High Contrast Dark" value="hc-black"></el-option></el-select>

import * as monaco from 'monaco-editor'import {ref, toRaw } from 'vue'import $ from 'jquery'export default{setup() {const editor = ref(null)const editorTheme = ref("vs-dark")const initEditor = () => {// 初始化编辑器，确保dom已经渲染editor.value = monaco.editor.create(document.getElementById('codeEditBox'), {// ..... 其他设置不变，修改theme，绑定editorThemetheme: editorTheme.value, // ......});}$(document).ready(function () {initEditor()})const handleTheme = () => {monaco.editor.setTheme(editorTheme.value)}return {editor,handleTheme,editorTheme,}},}

4. 切换语言Language

<el-select v-model="language" placeholder="选择语言" @change="handleLanguage"><el-optionv-for="(languageItem, key) in languageOptions":key="key":label="languageItem":value="languageItem"></el-option></el-select>

import api from '@/api'import * as monaco from 'monaco-editor'import {ref, toRaw } from 'vue'import $ from 'jquery'import {format } from 'sql-formatter'export default{setup() {const editor = ref(null)const language = ref("python")const languageOptions = ref(["bat", "cpp", "css", "dockerfile", "go", "graphql", "html", "ini","java", "javascript", "json", "julia", "kotlin", "less", "markdown", "mysql", "objective-c", "pascal", "pascaligo","perl", "php", "powershell", "python", "r", "redis", "rust", "scala", "scheme", "scss", "shell","sophia", "sql", "swift", "tcl", "typescript", "xml", "yaml"])const initEditor = () => {editor.value = monaco.editor.create(document.getElementById('codeEditBox'), {// ...... 其他设置不变，修改language，绑定languagelanguage: language.value, //语言支持自行查阅demo// ......});}$(document).ready(function () {initEditor()})const handleLanguage = (item) => {language.value = itemmonaco.editor.setModelLanguage(toRaw(editor.value).getModel(), language.value)// console.log(toRaw(editor.value).getModel().getLanguageId())}return {editor,language,handleLanguage,languageOptions,}},}

5. 格式化JSON和SQL

1. 安装sql-formatter（json的格式化，monaco-editor是自带的，直接使用即可）npm install sql-formatter -s2. 引入import { format } from 'sql-formatter'

<el-button @click="handleFormat" type="primary">格式化</el-button>

import * as monaco from 'monaco-editor'import {ref, toRaw } from 'vue'import {format } from 'sql-formatter'export default{setup() {const handleFormat = () => {let lan = toRaw(editor.value).getModel().getLanguageId()console.log(lan)let content = toRaw(editor.value).getValue()if (lan == 'sql'){// 格式化sqltoRaw(editor.value).setValue(format(content))}else if (lan == 'json') {// 格式化jsontoRaw(editor.value).trigger('anyString', 'editor.action.formatDocument')toRaw(editor.value).setValue(content)}}return {handleFormat}},}

效果如图

json

sql

功能应该会持续更新，附上代码仓库链接