在现代Web应用环境中,在线代码编辑器,已逐渐成为不可缺的工具了,Monaco Editor是微软开源的一款web版代码编辑器。它支持智能提示、代码高亮、代码格式化、多种编程语言,并且可以自定义主题和插件。
上次我们提到,可以通过npm方式来使用。但是有些项目,我们需要直接引用怎么办?
效果图
创建容器
引入javascript文件
您也可以访问官网地址,下载发布的版本,然后本地应用。
https://microsoft.github.io/monaco-editor/
创建编辑器实例
(function(){
let editor;
require(['vs/editor/editor.main'], function() {
editor = monaco.editor.create(document.getElementById('editor'), {
value: 'function hello() {\n\talert("Hello world!");\n}',
language: 'javascript'
});
});
})();
代码获取与设置
// 获取
const content = editor.getValue();
// 设置
editor.setValue('function hello() {\n\talert("Hello world!");\n}');
人人为我,我为人人,谢谢您的浏览,我们一起加油吧。