前言

项目里使用到 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. JOISC2020 题解

    Day1T1 建筑装饰4 题目链接:Day1T1 建筑装饰4 Solution 我们先考虑朴素的\(dp\)方法: 设\(dp_{i,j,k}\)表示前\(i\)个数中,选了\(j\)个\(B\)数组 ...

  2. HCNP Routing&Switching之VRRP基础

    前文我们了解了链路高可用技术链路聚合相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16279078.html:今天我们来聊一聊另一种高可用技术,网关高 ...

  3. resttemplate 请求方式详解

    get 普通请求: restemplate.getForEntity(url,String.class).getBody(); get 导出请求: restemplate.getForEntity(u ...

  4. .NET C#基础（4）：属性 - 本质是方法

    0. 文章目的   本文面向有一定.NET C#基础知识的学习者,介绍C#中属性的属性.定义.使用方法以及特殊性. 1. 阅读基础   理解C#基本语法(定义类及类成员,调用方法)   认可OOP的封 ...

  5. Docker容器手动安装mysql（国内镜像）

    Docker手动安装mysql 1.创建centos镜像的容器 [root@localhost Tools]# docker run -i -d -h zabbix --name zabbix -p ...

  6. camunda开源版与商业版的差异

    Camunda流程引擎分社区版和企业版,社区版实际上是开源版,是Apache2.0协议,企业版实际上是商业收费版本,需要购买授权才能使用,那么社区版和企业版的差异有哪些呢,社区版本是否能满足我们日常的 ...

  7. C#中的枚举器

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年6月28日. 一.先从可枚举类型讲起 1.1 什么是可枚举类型? 可枚举类型,可以简单的理解为: 有一个类,类中有挺多的数据,用一种统 ...

  8. Citus 11 for Postgres 完全开源，可从任何节点查询(Citus 官方博客)

    Citus 11.0 来了! Citus 是一个 PostgreSQL 扩展,它为 PostgreSQL 添加了分布式数据库的超能力. 使用 Citus,您可以创建跨 PostgreSQL 节点集群透 ...

  9. RPA供应链管制单修改机器人

    背景:供应链环节中,研发物料时而因为市场缺货等原因无法采购,资材部需登入系统修改物料管制单. 操作流程:登录PDM系统中读取数据.登录ERP系统中更新数据. 人工操作:每日耗时3.5小时,出现一定比例 ...

  10. C++ 练气期之一文看懂字符串

    C++ 练气期之细聊字符串 1. 概念 程序不仅仅用于数字计算,现代企业级项目中更多流转着充满了烟火气的人间话语.这些话语,在计算机语言称为字符串. 从字面上理解字符串,类似于用一根竹签串起了很多字符 ...