zoukankan      html  css  js  c++  java
  • 网页版vscode插件(Monaco Editor),非常好用的代码编辑器插件

     下载链接

             https://microsoft.github.io/monaco-editor/

     API文档链接

            https://microsoft.github.io/monaco-editor/api/index.html

      如何编辑器使用

      nodejs开发环境的使用  $ npm install monaco-editor 进行安装,下载链接中有

      下载完成后会获取如下的文件列表:

       将 dev 目录复制到你的项目中

      在页面中引用 loder.js 如下:

    <script src="../../../lib/editorlib/editor/vs/loader.js"></script>

      js初始化如下:

    require.config({
            paths: {
                'vs': '../../lib/editorlib/editor/vs'
            },
            'vs/nls': {
                availableLanguages: {
                    '*': 'zh-cn'
                }
            }
        });
    
        require(['vs/editor/editor.main'], function () {
            editor = monaco.editor.create(document.getElementById('editor'), {
                // autoIndent: true,
                value: '',
                language: 'html',//默认html语言
                contextmenu: true,
                theme: 'vs-dark',
                automaticLayout: true,
                EditorMinimapOptions: {
                    enabled: false
                },
            });
        });

      编辑器的内容设置与获取

    editor.getValue();//获取编辑器内容
    
    //如果内容是非html格式,需要设置编辑器语音类型
    editor.setValue("");//设置编辑器内容

      动态设置语言

      初始化默认的是html,在进行编辑时会提示html的代码补全信息。如何切换到js语言模式如下:

    monaco.languages.register({id: 'javascript'});
    var language = monaco.editor.createModel(null, 'javascript');
    editor.setModel(language);

      如何识别编辑器中的内容是否更改

      编辑器本身是没有这个功能,我们可以利用编辑器的 onDidChangeModelContent 事件对编辑器进行监听,间接实现识别内容是否更改功能。代码如下:

    var editorContentVersionId = 0;//编辑历史版本id
    var editorContentPageVersionId = 0;//编辑器的当前版本id
    require(['vs/editor/editor.main'], function () {
            editor = monaco.editor.create(document.getElementById('editor'), {
                // autoIndent: true,
                value: '',
                language: 'html',
                contextmenu: true,
                theme: 'vs-dark',
                automaticLayout: true,
                EditorMinimapOptions: {
                    enabled: false
                },
            });
    
            editor.onDidChangeModelContent(function (e) {
                editorContentPageVersionId = e.versionId;
                // console.log(editorContentVersionId,editorContentPageVersionId)
            });
    
        });
    
    //检测编辑器是变更内容
    var checkEditorContent = function () {
        if (editorContentVersionId == 0 || editorContentVersionId == editorContentPageVersionId) {
            return true;
        }
        return false;
    }
    
    //已当前版本为基准判断是否变更
    var resetEditorContentVersion = function () {
        editorContentVersionId = editorContentPageVersionId;
    }

      有个小缺陷,就是将修改的内容还原之后还是会判定为已修改

      最后分享下我在公司开发的项目:

      https://www.esmap.cn/onlinedev/content/editor/index/index.html

      暂时只有这些,后面有好的想法再写

  • 相关阅读:
    C++ 日期 & 时间
    C++ 引用
    C++ 指针
    C++ 字符串
    C++ 数组
    C++ 数字
    C++ 函数
    C++ 判断
    C++ 循环
    C++ 运算符
  • 原文地址:https://www.cnblogs.com/i_am_me/p/15031642.html
Copyright © 2011-2022 走看看