Vue中使用Monaco Editor代码编辑器

一、安装依赖

npm install editor@1.0.0
npm install monaco-editor@0.19.3
npm install monaco-editor-webpack-plugin@1.9.1

二、配置vue.config.js文件

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {configureWebpack: {plugins: [new MonacoWebpackPlugin()]}
}

三、新增jsonpath.js

const colType = { Object, Array }export function getJsonPath(text, offSet) {// console.log(text, offSet);let pos = 0let stack = []let isInKey = falsewhile (pos < offSet) {const startPos = posswitch (text[pos]) {case '"':var { text: s, pos: newPos } = readString(text, pos)if (stack.length) {const frame = stack[stack.length - 1]if (frame.colType === colType.Object && isInKey) {frame.key = sisInKey = false}}pos = newPosbreakcase '{':stack.push({ colType: colType.Object })isInKey = truebreakcase '[':stack.push({ colType: colType.Array, index: 0 })breakcase '}':case ']':stack.pop()breakcase ',':if (stack.length) {const frame = stack[stack.length - 1]if (frame.colType === colType.Object) {isInKey = true} else {frame.index++}}break}if (pos === startPos) {pos++}}return pathToString(stack);
}function pathToString(path) {let s = '$'try {for (const frame of path) {if (frame.colType === colType.Object) {if (!frame.key.match(/^[a-zA-Z$_][a-zA-Z\d$_]*$/)) {// const key = frame.key.replace('"', '\\"')s += `["${frame.key}"]`} else {if (s.length) {s += '.'}s += frame.key}} else {s += `[${frame.index}]`}}return s;} catch (ex) {return '';}
}function isEven(n) {return n % 2 === 0;
}function readString(text, pos) {let i = pos + 1i = findEndQuote(text, i)var textpos = {text: text.substring(pos + 1, i),pos: i + 1}return textpos
}// Find the next end quote
function findEndQuote(text, i) {while (i < text.length) {// console.log('findEndQuote: ' + i + ' : ' + text[i])if (text[i] === '"') {var bt = i// Handle backtracking to find if this quote is escaped (or, if the escape is escaping a slash)while (0 <= bt && text[bt] == '\\') {bt--}if (isEven(i - bt)) {break;}}i++}return i
}

四、新增组件 monacoEditor.vue

<template><div><divid="code-editor":style="{width: '100%',height: height + 'px',border: '1px solid grey',}"></div></div>
</template><script>
import * as monaco from "monaco-editor";
import { getJsonPath } from "./jsonpath";export default {name: "monacoEditor",model: {prop: "content",event: "change",},props: {content: null,language: {default: "javascript", //json、css、html、typescript、javascript、sql},readOnly: {default: false,},height: {default: 300}},data: function() {return {editor: null,jsonPath: null,};},watch: {content: function(newValue) {// console.debug("Code editor: content change");if (this.editor) {if (newValue !== this.editor.getValue()) {// console.log(newValue);monaco.editor.setModelLanguage(this.editor.getModel(), this.language);this.editor.setValue(newValue);this.editor.trigger(this.editor.getValue(),"editor.action.formatDocument");}}},},mounted: function() {const copyToClipboard = this.copyToClipboard;this.editor = monaco.editor.create(this.$el.querySelector("#code-editor"), {value: this.content,language: this.language,theme: "vs",readOnly: this.readOnly,automaticLayout: true,});this.editor.addAction({id: "json-path",label: "Copy JsonPath",keybindings: [monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_J),],precondition: "editorLangId == 'json'",keybindingContext: "editorLangId == 'json'",contextMenuGroupId: "9_cutcopypaste",contextMenuOrder: 2,run: copyToClipboard,});this.editor.onDidChangeModelContent((event) => {const value = this.editor.getValue();if (this.value !== value) {// console.log(value,'====on-change-change');this.$emit("change", value, event);}});this.editor.onDidChangeCursorPosition((event) => {const value = this.editor.getValue();const offSet = this.editor.getModel().getOffsetAt(event.position);const language = this.language;if (this.value !== value && language === "json") {// console.log(value,'====on-cursor-change');this.$emit("on-cursor-change", { offSet: offSet });}if (language == "json" && offSet !== 0) {this.jsonPath = getJsonPath(value, offSet);// console.log(value,'====on-jsonpath-change');this.$emit("on-jsonpath-change", { jsonPath: this.jsonPath });}});},methods: {copyToClipboard() {const notification = this.$Notice;if (this.jsonPath) {navigator.clipboard.writeText(this.jsonPath).then(function() {},function() {notification.error({title: "jsonpath copy failed.",});});} else {notification.warning({title: "There is no jsonpath that can be copied.",});}},},
};
</script></script>

五、组件调用

import MonacoEditor from '@/components/MonacoEditor';components: {MonacoEditor,
}<monaco-editor v-model="content"language="json":readOnly="false" >
</monaco-editor>

Vue中使用Monaco Editor代码编辑器相关推荐

Vue3中使用Monaco Editor代码编辑器记录～持续更新
Vue3中使用Monaco Editor代码编辑器记录-持续更新因为毕设需要用到代码编辑器,根据调研,我选择使用monaco-editor代码编辑器前端框架使用Vue3 + elementUI m ...
vue中npm引入editor.md编辑器插件
官网并没有安装指南╭(╯^╰)╮ 1:npm安装editor npm install editor.md 2:安装jquery(如果使用cdn在组件中引入,会报错zepto找不到) 所以要安装jque ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...
react 中使用 Monaco Editor 编辑器
目录 Monaco Editor react 中使用安装使用方法 Webpack 配置属性获取 monac 开发示例---自定义提示自定义主题 Monaco Editor 微软之前有个项目叫 ...
Reac16+Monaco打造代码编辑器（前端部分）
效果图实现这里小编只讲编辑器的主体部分,及两个选择框以及编辑器部分. 首先是选择器,毕竟主体的编辑器需要通过选择器来改变样式以及提供语言高亮等支持 SelectBox.js import Reac ...
在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴. 找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor.ckeditor doc ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...

Vue中使用Monaco Editor代码编辑器

一、安装依赖

二、配置vue.config.js文件

三、新增jsonpath.js

四、新增组件 monacoEditor.vue

五、组件调用

Vue中使用Monaco Editor代码编辑器相关推荐

最新文章

热门文章