monaco-editor: https://github.com/Microsoft/monaco-editor

在ESM中的使用官方也有对应文档:https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md

现基于vue-cli2的项目做具体步骤说明:

1. 安装:

cnpm install monaco-editor --save

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

2. 修改webpack.base.conf.js配置文件

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
... module.exports = {
...
plugins: [
...
new MonacoWebpackPlugin()
]
};

3. 在对应的组件中使用

.vue

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

.ts

import { Vue, Component, Watch } from "vue-property-decorator"
import * as monaco from 'monaco-editor'
; @Component({ }) export default class Parent extends Vue {
...
value = '初始sql语句';
monacoEditor;
mounted() {
this.monacoEditor = monaco.editor.create(document.getElementById('container'), {
value: this.value,
language: 'sql'

});

}
}

注意:要等container渲染成功才能monaco.editor.create

-------------------------------------------------------------------------------------------- 其他问题 -----------------------------------------------------------------------------------------

1. 怎么用代码方式改变this.monacoEditor的value值?

答: this.monacoEditor.setValue(newValue);

PS: 本人基于monaco-editor实现了一个针对sql语言的自定义提示、以及对函数的hover提示。了解monaco-editor的控制行数字不显示、右侧小代码区域不显示、滚动不显示等样式问题。大家有问题欢迎互相交流。

monaco-ediotr文档是真难看啊,我也是各种搜索实现的相关功能·····

在vue项目中使用monaco-editor的更多相关文章

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

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

  2. 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

  3. 在vue项目中使用UEditor--plus

    1:UEditor-plus富文本编辑器如何在vue项目中使用 备注:UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器,由于该项目不在维护:程序员自发对其进行了维护,详见 ht ...

  4. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  5. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  6. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  7. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  8. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  9. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  10. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

随机推荐

  1. python学习笔记:第7天 深浅拷贝

    目录 1. 基础数据类型补充 2. set集合 3. 深浅拷贝 1. 基础数据类型补充 (1)join方法 join方法是把一个列表中的数据进行拼接,拼接成字符串(与split方法相反,split方法 ...

  2. ACM1000:A + B Problem

    Problem Description Calculate A + B.   Input Each line will contain two integers A and B. Process to ...

  3. 156. Merge Intervals【LintCode by java】

    Description Given a collection of intervals, merge all overlapping intervals. Example Given interval ...

  4. 从国内下载Linux的CentOS系统

    http://mirror.nsc.liu.se/centos-store/7.3.1611/isos/x86_64/

  5. 【转载】COM编程入门不得不看的文章 :第一部分 什么是COM,如何使用COM

    原文:COM编程入门不得不看的文章 :第一部分 什么是COM,如何使用COM 原文:http://www.codeproject.com/Articles/633/Introduction-to-CO ...

  6. WPF Style Setter use a TemplateBinding?

    <Style TargetType="{x:Type local:ImageButton}"> <Setter Property="Horizontal ...

  7. vim分屏功能总结

    vim的分屏功能 总结起来,基本都是ctrl+w然后加上某一个按键字母,触发一个功能.(1)在shell里打开几个文件并且分屏: vim -On file1 file2 ... vim -on fil ...

  8. Java开发工程师(Web方向) - 02.Servlet技术 - 第3章.Servlet应用

    第3章.Servlet应用 转发与重定向 转发:浏览器发送资源请求到ServletA后,ServletA传递请求给ServletB,ServletB生成响应后返回给浏览器. 请求转发:forward: ...

  9. 【movable-area、movable-view】 可移动区域组件说明

    movable-area.movable-view 可移动区域组件 原型: <movable-area scale-area="[Boolean]"> <mova ...

  10. 《Spark 官方文档》在Mesos上运行Spark

    本文转自:http://ifeve.com/spark-mesos-spark/ 在Mesos上运行Spark Spark可以在由Apache Mesos 管理的硬件集群中运行. 在Mesos集群中使 ...