Monaco Editor --Web编辑器 自定义主题、代码提示等
官网： Monaco Editor
JS配置信息：
//相关的包配置需要下载到对应目录
require.config({ paths: { 'vs': './vs' }});
require(['vs/editor/editor.main'], function() {
monaco.editor.defineTheme('BlackTheme', {
base: 'vs-dark',
inherit: true,
rules: [{ background: '#3e414a' }],
colors: {
// 相关颜色属性配置
// 'editor.foreground': '#000000',
'editor.background': '#3e414a', //背景色
// 'editorCursor.foreground': '#8B0000',
// 'editor.lineHighlightBackground': '#0000FF20',
// 'editorLineNumber.foreground': '#008800',
// 'editor.selectionBackground': '#88000030',
// 'editor.inactiveSelectionBackground': '#88000015'
}
});
//设置自定义主题
monaco.editor.setTheme('BlackTheme');
//创建编辑器
editor = monaco.editor.create(document.getElementById('container'), {
value: '',
language: 'python',
theme:'BlackTheme',
automaticLayout: true,
fontSize : '20px',
});
// 创建代码提醒
monaco.languages.registerCompletionItemProvider('python', {
provideCompletionItems: function(model, position) {
// find out if we are completing a property in the 'dependencies' object.
var textUntilPosition = model.getValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column
});
var suggestions = [];
var word = model.getWordUntilPosition(position);
var range = {
startLineNumber: position.lineNumber,
endLineNumber: position.lineNumber,
startColumn: word.startColumn,
endColumn: word.endColumn
};
if(textUntilPosition.charAt(textUntilPosition.length-2)=='.'){
suggestions = createTips();
}
return {suggestions: suggestions};
}
});
});
// 代码提示方法(返回一个数组)
function createTips() {
return [
{
label: 'SetValue', //显示的提示名称
insertText: 'SetValue("text")' //选择后粘贴到编辑器中的文字
},
]
}
HTML前端代码
<body overflow:hidden style="padding:0;margin:0">
<div id="container" style="width:100%;height:100vh;border:0px"></div>
</body>
