前言

项目里使用到 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 实现在线编辑器的更多相关文章

  1. Asp.Net Core 使用Monaco Editor 实现代码编辑器

    在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著 ...

  2. Vue cli2.0 项目中使用Monaco Editor编辑器

    monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...

  3. monaco editor + vue的配置

    monaco editor是vscode的御用编辑器. 功能非常强大,使用方便轻巧,对js\ts等等语言支持都良好,能方便的扩展以支持其他语言或者自定义的特性. 夸了这么多,这里只说它一个问题: 这货 ...

  4. 在线编辑器ACE Editor的使用

    ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...

  5. 使用 TypeScript，React，ANTLR 和 Monaco Editor 创建一个自定义 Web 编辑器(二)

    译文来源 欢迎阅读如何使用 TypeScript, React, ANTLR4, Monaco Editor 创建一个自定义 Web 编辑器系列的第二章节, 在这之前建议您阅读使用 TypeScrip ...

  6. 我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器（开源）

    前言 之前,一直想开发一款属于自己的Markdown编辑器,主要是自己平常写文章可以更加灵活操作,另外扩宽自己的视野也是非常不错的选择啊!所以在周末就决定玩耍一番.首先我调研了很多线上热门的md编辑器 ...

  7. 手把手教你实现在Monaco Editor中使用VSCode主题

    背景 笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持 ...

  8. 在线编辑器的使用-KindEditor

    第一种:KindEditor编辑器 步骤一:加载相应的核心的文件 下载地址:http://kindeditor.net/demo.php <link rel="stylesheet&q ...

  9. 05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能

    这篇文章讲的是在线编辑器功能,之前的部门模块中,增加部门的功能jsp页面起先是这么做的.

随机推荐

  1. 理解RESTful Api设计

    REST REST(REpresentational State Transfer)是 Roy Fielding 博士于 2000 年在他的博士论文中提出来的一种软件架构风格(一组架构约束条件和原则) ...

  2. springBoot 定时+发送邮件

    定时任务引入meaven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifa ...

  3. v87.01 鸿蒙内核源码分析 (内核启动篇) | 从汇编到 main () | 百篇博客分析 OpenHarmony 源码

    本篇关键词:内核重定位.MMU.SVC栈.热启动.内核映射表 内核汇编相关篇为: v74.01 鸿蒙内核源码分析(编码方式) | 机器指令是如何编码的 v75.03 鸿蒙内核源码分析(汇编基础) | ...

  4. 「ABC 249Ex」Dye Color

    考虑停时定理. 初始势能为 \(\sum \Phi(cnt_i)\),末势能为 \(\Phi(n)\),我们希望构造这样一个 \(\Phi:Z\to Z\) 函数,使得每一次操作期望势能变化量为常数. ...

  5. drools决策表的简单使用

    目录 一.背景 二.一个简单的决策表 1.在同一个决策表中处理多个Sheet页 2.RuleSet下方可以有哪些属性 3.RuleTable下方可以有哪些属性 4.规则属性的编写 三.需求 四.实现 ...

  6. SpringSecurity简单入门

    1.简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Spr ...

  7. JNPF移动办公解决方案

    市场背景 随着办公自动化系统的普及,电子化.数据化的办公方式已进入越来越多的企业和政府单位,信息化的办公系统在企事业内部编织起一套高效.畅通的信息互联体系,极大推动了企事业单位生产力的发展.但与此同时 ...

  8. Jmeter跨线程组获取token(彻底解决因格式token报错)

    将token设置为全局变量网上方式方法千千万,但是你就是获取token会失败,不是提示格式错误,就是提示无法获取token,没安装Jmeter的可以查看前两期教程,有详细介绍 在工作当中如果仅仅是一个 ...

  9. 2020 CSP-J 初赛游记

    估分 预估 85 分,一是怕选错,而是最后真的错了一些 考点 排列组合:论临时抱佛脚的作用 靠前看了一下捆绑法和插板法,果然考了. 2.算法常识,和复杂度分析 冒泡排序最小交换次数 = n-1 , G ...

  10. 深度学习与CV教程(14) | 图像分割 (FCN,SegNet,U-Net,PSPNet,DeepLab,RefineNet)

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/37 本文地址:http://www.showmeai.tech/article-det ...