monaco-editor 使用demo

npm install monaco-editor@0.32.1

main.js设置下面:

import mcommon from '@/components/commons'
Vue.use(mcommon)



vue.config.js设置下面:

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
configureWebpack: {
		module: {
			rules: [{
				test: /\.js/,
				enforce: 'pre',
				include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
				use: MonacoWebpackPlugin.loader
			}]
		},
		plugins: [
			new MonacoWebpackPlugin()
		]
	}


页面用法

<div style="margin-top:10px;">
    <editor :code="code" height="300px" ref="formula" lib='123'/>
</div>

import editor from '@/components/monaco/formulaEditor'
components: {
 editor
},
handleNodeClick(data) {  // 往编辑器里插入内容
  console.log(data);
  this.$refs.formula.insertCode(data.label);
}
下面是模仿vscode编辑器都editor组件
<template>
  <div class="myEditor">
    <div id="container" ref="container" :style="'height:' + height"></div>
  </div>
</template>
<script>
import { setLocaleData } from "monaco-editor-nls";
import zh_CN from "monaco-editor-nls/locale/zh-hans";
setLocaleData(zh_CN);
const monaco = require("monaco-editor/esm/vs/editor/editor.api");
import formulajs from "../../assets/formulajs/formulajs.type";
var editor;
export default {
  props: {
    code: {
      type: String,
      required: true,
    },
    lib: {
      type: String,
      required: true,
    },
    height: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      editor,
    };
  },
  mounted() {
    let _this = this;
    // extra libraries
    monaco.languages.typescript.typescriptDefaults.addExtraLib(
      formulajs,
      "ts:filename/formulajs.d.ts"
    );

    var libUri1 = "ts:filename/bill.d.ts";
    monaco.languages.typescript.typescriptDefaults.addExtraLib(
      _this.lib,
      libUri1
    );

    editor = monaco.editor.create(document.getElementById("container"), {
      language: "typescript",
      value: _this.code,
    });
  },
  methods: {
    getValue: () => {
      let val = editor.getValue();
      console.warn(val);
      eval(val);
    },
    insertCode: (val) => {
      let selection = editor.getSelection();
      let range = new monaco.Range(
        selection.startLineNumber,
        selection.startColumn,
        selection.endLineNumber,
        selection.endColumn
      );
      let id = { major: 1, minor: 1 };
      let op = {
        identifier: id,
        range: range,
        text: val,
        forceMoveMarkers: true,
      };
      editor.executeEdits("my-source", [op]);
    },
  },
};
</script>
<style scoped>
#container {
  height: 100%;
  text-align: left;
}
</style>

 

React-Monaco-Editor 是一个 React 封装的 Monaco Editor,可以在 React 应用中方便地使用 Monaco EditorMonaco Editor 是一个强大的代码编辑器,被广泛应用于微软的 VS Code 编辑器中。 下面是使用 React-Monaco-Editor 的步骤: 1. 安装 React-Monaco-Editor 使用 npm 或者 yarn 安装: ``` npm install react-monaco-editor ``` 或者 ``` yarn add react-monaco-editor ``` 2. 导入 React-Monaco-Editor 在需要使用 Monaco Editor 的组件中导入 React-Monaco-Editor: ```jsx import React, { useState } from 'react'; import MonacoEditor from 'react-monaco-editor'; ``` 3. 使用 React-Monaco-Editor 使用 React-Monaco-Editor 组件,传入需要编辑的代码和一些配置项: ```jsx function MyEditor() { const [code, setCode] = useState('const hello = "Hello, world!";'); const options = { selectOnLineNumbers: true }; return ( <MonacoEditor width="800" height="600" language="javascript" theme="vs-dark" value={code} options={options} onChange={setCode} /> ); } ``` 在上面的例子中,我们使用 useState 来管理编辑器中的代码,然后传入了一些配置项,比如语言是 JavaScript,主题是暗色,宽度和高度是 800 和 600。还传入了一个 onChange 函数,用来实时更新编辑器中的代码。 4. 更多配置项 React-Monaco-Editor 支持很多配置项,比如: - language:编辑器的语言,如 JavaScript、HTML、CSS 等。 - theme:编辑器的主题,如 vs、vs-dark、hc-black 等。 - value:编辑器的默认值。 - options:编辑器的选项,如是否显示行号、缩进大小等。 - editorDidMount:当编辑器初始化完成后的回调函数。 - onChange:当编辑器内容改变时的回调函数。 更多配置项可以参考官方文档:https://github.com/superRaytin/react-monaco-editor#readme。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值