zoukankan      html  css  js  c++  java
  • 在vue项目中使用monaco-editor

    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文档是真难看啊,我也是各种搜索实现的相关功能·····

  • 相关阅读:
    分析函数
    Orcal函数
    归档日志
    JSP数据交互
    JSP
    接口
    JAVA修饰符
    QuicKHit
    Java 三章错题
    Java 多态
  • 原文地址:https://www.cnblogs.com/XHappyness/p/9414177.html
Copyright © 2011-2022 走看看