⽹页版vscode插件（MonacoEditor），⾮常好⽤的代码编辑器
插件
　下载链接
　API⽂档链接
  如何编辑器使⽤
  nodejs开发环境的使⽤$ npm install monaco-editor 进⾏安装，下载链接中有
  下载完成后会获取如下的⽂件列表：
  将 dev ⽬录复制到你的项⽬中
  在页⾯中引⽤ loder.js 如下：
<script src="../../../lib/editorlib/editor/vs/loader.js"></script>
  js初始化如下：
paths: {
'vs': '../../lib/editorlib/editor/vs'
},
'vs/nls': {
availableLanguages: {
'*': 'zh-cn'
}
}
});
require(['vs/editor/editor.main'], function () {
editor = ElementById('editor'), {
// autoIndent: true,
value: '',
language: 'html',//默认html语⾔
contextmenu: true,
theme: 'vs-dark',
automaticLayout: true,
EditorMinimapOptions: {
enabled: false
},
});
});
  编辑器的内容设置与获取
//如果内容是⾮html格式，需要设置编辑器语⾳类型
editor.setValue("");//设置编辑器内容
  动态设置语⾔
  初始化默认的是html，在进⾏编辑时会提⽰html的代码补全信息。如何切换到js语⾔模式如下：
ister({id: 'javascript'});
var language = ateModel(null, 'javascript');
editor.setModel(language);
  如何识别编辑器中的内容是否更改
  编辑器本⾝是没有这个功能，我们可以利⽤编辑器的 onDidChangeModelContent 事件对编辑器进⾏监听，间接实现识别内容是否更改功能。代码如下：
var editorContentVersionId = 0;//编辑历史版本id
var editorContentPageVersionId = 0;//编辑器的当前版本id
require(['vs/editor/editor.main'], function () {
editor = ElementById('editor'), {
// autoIndent: true,
value: '',
language: 'html',
contextmenu: true,
theme: 'vs-dark',
automaticLayout: true,
EditorMinimapOptions: {
enabled: false
},
});
editorContentPageVersionId = e.versionId;
// console.log(editorContentVersionId,editorContentPageVersionId)
});
});
//检测编辑器是变更内容
var checkEditorContent = function () {
if (editorContentVersionId == 0 || editorContentVersionId == editorContentPageVersionId) {如何下载javascript
return true;
}
return false;
}
//已当前版本为基准判断是否变更
var resetEditorContentVersion = function () {
editorContentVersionId = editorContentPageVersionId;
}
  有个⼩缺陷，就是将修改的内容还原之后还是会判定为已修改
  最后分享下我在公司开发的项⽬：
  暂时只有这些，后⾯有好的想法再写

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。