vue 使用 monaco-editor 实现在线编辑器
前言
项目里使用到 monaco-editor 编辑器，实现源码编辑器，看了很多网上教程，记录一下实现过程。在此之前引用很多博主的方法安装但是引入的时候，运行项目总是各种各样的错误，找不到头绪。终于在搜索文章的时候，看到里面的运行错误我也遇到过：来源
看到下面的评论，我也尝试着安装，版本号对应上就可以实现了。
话不多说，直接上代码.
安装
使用 npm 安装对应版本号
"monaco-editor": "0.27.0",
"monaco-editor-webpack-plugin": "4.2.0"
使用
import * as monaco from "monaco-editor";
子组件
<template>
<div ref="main" style="width: 100%; height: 300px"></div>
</template>
<script>
import * as monaco from "monaco-editor";
export default {
data() {
return {
monacoEditor: null,
};
},
mounted() {
this.init();
},
methods: {
init() {
// 使用 - 创建 monacoEditor 对象
this.monacoEditor = monaco.editor.create(this.$refs.main, {
theme: "vs-dark", // 主题
value: "console.log(1111)", // 默认显示的值
language: "javascript",
folding: true, // 是否折叠
foldingHighlight: true, // 折叠等高线
foldingStrategy: "indentation", // 折叠方式 auto | indentation
showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
disableLayerHinting: true, // 等宽优化
emptySelectionClipboard: false, // 空选择剪切板
selectionClipboard: false, // 选择剪切板
automaticLayout: true, // 自动布局
codeLens: false, // 代码镜头
scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
colorDecorators: true, // 颜色装饰器
accessibilitySupport: "off", // 辅助功能支持 "auto" | "off" | "on"
lineNumbers: "on", // 行号 取值： "on" | "off" | "relative" | "interval" | function
lineNumbersMinChars: 5, // 行号最小字符 number
enableSplitViewResizing: false,
readOnly: false, //是否只读 取值 true | false
});
},
},
};
</script>
父组件
<template>
<div>
<monaco-editor></monaco-editor>
</div>
</template>
<script>
import monacoEditor from './components/index.vue';
export default{
components:{
monacoEditor
}
}
</script>
实现效果
最终的实现效果里我发现的功能有：
- 代码提示
- 代码高亮
- 右键有菜单
- 代码搜索
其他配置
代码提示
根据上面的步骤引入调用后，是有代码提示的，效果如下：
重点来了！！！！
我在 vue.config.js 里配置了以下代码，代码提示一下子多了起来。
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin()
]
}
};
示例
完成以上的使用和配置后，接下来就可以实现一个在线编辑器了，运行代码部分查询资料，借鉴了这个博主的 文章
<template>
<div id="app" class="flex-row">
<div class="left-content">
<div class="flex-row">
<div class="wrap">
<p style="background: #6aa84f">html</p>
<monaco-edito
ref="html"
width="500px"
height="290px"
language="html"
></monaco-edito>
</div>
<div class="wrap">
<p style="background: #cc4125">css</p>
<monaco-edito
ref="css"
width="500px"
height="290px"
language="css"
></monaco-edito>
</div>
</div>
<div class="wrap">
<p style="background: #f1c232">js</p>
<monaco-edito ref="js" height="260px"></monaco-edito>
</div>
</div>
<div class="right-content">
<button @click="runCode">运行</button>
<p>实现结果：</p>
<iframe class="view-panel" id="preview" frameborder="0"></iframe>
</div>
</div>
</template>
<script>
import MonacoEdito from "./components/monaco-editor.vue";
export default {
name: "app",
components: {
MonacoEdito,
},
methods: {
runCode() {
var html = this.$refs.html.monacoEditor.getValue();
var css = this.$refs.css.monacoEditor.getValue();
var js = this.$refs.js.monacoEditor.getValue();
let code = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editor</title>
<style>${css}</style>
</head>
<body>${html}</body>
<script>${js}<\/script>
</html>
`;
console.log(code);
const preview = document.getElementById("preview");
preview.setAttribute("srcdoc", code);
},
},
};
</script>
<style>
* {
padding: 0;
margin: 0;
}
.flex-row {
display: flex;
flex-direction: row;
}
.result {
border: 1px solid #ccc;
width: 100%;
height: 500px;
}
.left-content {
width: 1000px;
}
.right-content {
margin-left: 15px;
padding: 10px;
width: 100%;
}
.wrap {
display: flex;
flex-direction: column;
}
.wrap p {
padding: 5px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #fff;
}
.right-content p {
margin: 5px 0;
}
button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #409eff;
border: 1px solid #409eff;
color: #ffffff;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: 0.1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
</style>
还要配置下 vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({ languages: ['javascript', 'typescript', 'html', 'css', 'json'] })
]
}
};
实现效果
源码地址
https://gitee.com/dyclown/vue-monaco-editor-demo
vue 使用 monaco-editor 实现在线编辑器的更多相关文章
- Asp.Net Core 使用Monaco Editor 实现代码编辑器
在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著 ...
- Vue cli2.0 项目中使用Monaco Editor编辑器
monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...
- monaco editor + vue的配置
monaco editor是vscode的御用编辑器. 功能非常强大,使用方便轻巧,对js\ts等等语言支持都良好,能方便的扩展以支持其他语言或者自定义的特性. 夸了这么多,这里只说它一个问题: 这货 ...
- 在线编辑器ACE Editor的使用
ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...
- 使用 TypeScript，React，ANTLR 和 Monaco Editor 创建一个自定义 Web 编辑器(二)
译文来源 欢迎阅读如何使用 TypeScript, React, ANTLR4, Monaco Editor 创建一个自定义 Web 编辑器系列的第二章节, 在这之前建议您阅读使用 TypeScrip ...
- 我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器（开源）
前言 之前,一直想开发一款属于自己的Markdown编辑器,主要是自己平常写文章可以更加灵活操作,另外扩宽自己的视野也是非常不错的选择啊!所以在周末就决定玩耍一番.首先我调研了很多线上热门的md编辑器 ...
- 手把手教你实现在Monaco Editor中使用VSCode主题
背景 笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持 ...
- 在线编辑器的使用-KindEditor
第一种:KindEditor编辑器 步骤一:加载相应的核心的文件 下载地址:http://kindeditor.net/demo.php <link rel="stylesheet&q ...
- 05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能
这篇文章讲的是在线编辑器功能,之前的部门模块中,增加部门的功能jsp页面起先是这么做的.
随机推荐
- A* K短路
注:\(A*\) 求解K短路效率极其低下,时间复杂度\(O(nklog\ n)\),空间视题目而定,因为本质是爆搜,可求解数据范围较小的题目. 我们使用\(A*\)求解k短路: 首先需要预处理出估价函 ...
- 揭秘华为云GaussDB(for Influx)最佳实践：hint查询
摘要:GaussDB(for Influx)通过提供hint功能,在单时间线的查询场景下,性能有大幅度的提升,能有效满足客户某些特定场景的查询需求. 本文分享自华为云社区<华为云GaussDB( ...
- conda和pip加速参考
conda install和创建虚拟环境下载慢,可以修改/root/.condarc文件: vim /root/.condarc 各系统都可以通过修改用户目录下的 .condarc 文件.Window ...
- DYOJ 【20220317模拟赛】瞬间移动 题解
瞬间移动 题意 三维空间中从 \((0,0,0)\) 开始,每次移动 1,问刚好走 \(N\) 次能到 \((X,Y,Z)\) 的方案数 \(N\le10^7\),答案模 \(998244353\) ...
- centos 修改PHP默认版本
命令行输入export PATH=/usr/local/php/bin:$PATH 然后回车.
- shell 问题记录
工作中写了个 RestAPI 接口,然后想通过 crontab 任务,去定时调用接口.发现去拼接 post 请求真的不容易.对于单引号,双引号的使用.很懵,示例代码如下:对于 '$line' 处,单引 ...
- 软件成分分析（SCA）完全指南
上一篇文章中,我们讨论了 DAST 的概念.重要性及其工作原理.那在开发过程中如何查找开源软件包中的漏洞并学习如何修复?本指南带你一起了解 SCA 工具及其最佳实践. 如今,绝大多数代码驱动的应用程序 ...
- 【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具
前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...
- Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- Docker安装Portainer管理工具
1.下载镜像 docker pull portainer/portainer 2.启动 docker run -d -p 9000:9000 --restart=always -v /var/run/ ...