首页 前端知识 vue2 MonacoEditor实现在线运行js

vue2 MonacoEditor实现在线运行js

2024-07-22 01:07:14 前端知识 前端哥 923 957 我要收藏

介绍

MonacoEditor 是微软出品的一个代码编辑器,像vscode、codesandbox等等都是基于实现的。它能做很多事情,例如:

  • 代码高亮

  • 格式化

  • 定制主题

  • 多语言支持

  • 代码比对

Monaco Editor

目标功能

  • 点击编辑器外部可以向内部插入指定代码块

  • 注册自己的js函数到编辑器

  • 在线运行js,打印输出结果

  • 捕获执行js产生的错误并提示(未实现)

  • 增加自定义的类型声明(未实现)

在这里插入图片描述

样式比较简单,有兴趣的可以自己clone代码研究一下

安装monaco-editor

基于Vue2.x的版本集成monaco-editor,因为是基于webpack打包的,所以还需要安装**monaco-editor-webpack-plugin,**这里需要注意版本,两个包版本不对对应会出现很多问题。👇

monaco-editor-webpack-plugin

建议和我版本保持统一:

在这里插入图片描述

npm install --save-dev monaco-editor monaco-editor-webpack-plugin

引入

配置webpack插件

在这里插入图片描述

这里将它封装到一个组件中,方便复用

<template>
  <div id="container"></div>
</template>

<script>
import * as monaco from 'monaco-editor'
export default {
  name: "MonacoEditor",
  props: {
    option: {
      type: Object,
      default: () => {},
    },
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    // 初始化
    initEditor() {
      this.editor = monaco.editor.create(document.getElementById("container"), {
        value: this.value, // 内容
        language: "javascript", // 使用的语言
        ...this.option,
      });
      // 将编辑器的内容双向绑定到父组件中
      this.editor.onDidChangeModelContent((event) => {
        this.$emit("input", this.editor.getValue(), event);
      });
    }, 
  }
};
</script>

接下来我们将它引入到App中使用一下

<template>
  <div id="app">
    <div class="box">
      <div class="code_block">
        <h3>代码块(点击插入代码块)</h3>
        <div class="list">
          <div class="item" v-for="item in codeList" :key="item.id" @click="insertCode(item.id)">
            {{ item.id }}
          </div>
        </div>
      </div>
      <div class="editor">
        <MonacoEditor ref="editor" style="height: 500px" :option="options" v-model="code"></MonacoEditor>
      </div>
      <div class="debugegr">
        <button @click="execute">执行</button>
        <textarea class="console" :value="output"></textarea>
      </div>
    </div>
  </div>
</template>
<script>
import MonacoEditor from "./components/MonacoEditor.vue";
export default {
  name: "App",
  data() {
    return {
      options: {
        theme: "vs-dark", // 主题
      },
      code: ""
    };
  },
  components: {
    MonacoEditor,
  },
};
</script>

打开界面就可以看到开头如下的效果

在这里插入图片描述

实现功能

插入指定代码块

首先我们再data中加一组数据(这块如果函数较多可写到配置文件中):
在这里插入图片描述

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

然后增加一个方法,这里其实就是使用自带的api,不用死记硬背

在这里插入图片描述

注册自己的方法到编辑器

这个功能官网有对应的示例,就是调用编辑器的方法monaco.languages.registerCompletionItemProvider, 它接受两个参数,第一个参数是你的语言模型(例如javascript),第二个参数是个对象,具体代码如下

在这里插入图片描述

我这边的业务是这样的,存在一个全局对象global ,数据结构是树形,使用的方式就是

global.xxx.xxx 这样,所以当输入 . 时,就会触发方法,根据输入内容动态获取目标层级的方法

在这里插入图片描述

每一项的结构必须存在 label、kind、insertText

先更新到这,抽空写完。

总结

其实都是api的调用,有其他需求可留言。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14210.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!