前端工具 | JS编译器Monaco使用教程

最新推荐文章于 2024-08-17 18:56:20 发布

福伴

最新推荐文章于 2024-08-17 18:56:20 发布

阅读量1.6k

点赞数 1

原文链接：https://www.cnblogs.com/ifannie/p/14864512.html

版权

使用方法
官网
官方文档
 在线demo
github
安装
yarn add monaco-editor | npm install monaco-editor
引入
import * as monaco from ‘monaco-editor’ // 包体很大了但是demo可以跑起来

//自定义一些提示函数
const suggestions = [
{
label: ‘split_chinese’,
insertText: ‘split_chinese(inputString,language);’, // 不写的时候不展示。。
detail:
‘inputString：need split string\n’ +
‘language:\nCH_T：traditional Chinese\nCH_S：Chinese Simplified\n HK_T:Hong Kong Traditional\nTW_T:Taiwan Traditional\n’
},
{
label: ‘uuid’,
insertText: ‘var uuid = uuid();’,
detail: ‘generate uuid’
},
{
label: ‘HashMap’,
insertText: ‘var hashMap = new HashMap();’,
detail: ‘create hash object’
}
]
初始化
mounted() {
monaco.languages.registerCompletionItemProvider(‘JavaScript’, {
provideCompletionItems() {
return {
suggestions: suggestions
}
},
triggerCharacters: [’ ', ‘.’] // 写触发提示的字符，可以有多个
})
let self = this
setTimeout(function () {
self.init()
}, 50) //因为父组件还未传参子组件已经渲染
}

//初始化方法
init(script) {
let self = this
if (script) this.code = script
self. $r e f s . c o n t a i n e r . i n n e r H T M L =^{''} v a r e d i t o r = m o n a c o . e d i t o r . c r e a t e (t h i s .$ refs.container, {
value: this.code,
language: ‘javascript’,
minimap: {
enabled: false
},
fontSize: ‘12px’,
fixedOverflowWidgets: true // 超出编辑器大小的使用fixed属性显示
})
editor.onDidChangeModelContent(function () {
self.$emit(‘update:code’, editor.getValue()) //用来监听编辑器内容变化，将内容传给父组件
})
}
html