Monaco Editor --Web編輯器 自定義主題、程式碼提示等
阿新 • • 發佈：2020-11-19
官網： 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>