程式碼編輯器monaco-editor之基礎使用
阿新 • • 發佈：2019-01-11
1.下載安裝monaco-editor
npm install monaco-editor
我的安裝目錄在
C://Windows//SystemApps//Microsoft.MicrosoftEdgeDevToolsClient_8wekyb3d8bbwe//23//common//monaco-editor/
2.整合介面
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <div id="container" style="width:800px;height:600px;border:1px solid grey"></div> <script src="C://Windows//SystemApps//Microsoft.MicrosoftEdgeDevToolsClient_8wekyb3d8bbwe//23//common//monaco-editor//min//vs//loader.js"></script> <script> require.config({ paths: { 'vs': 'C://Windows//SystemApps//Microsoft.MicrosoftEdgeDevToolsClient_8wekyb3d8bbwe//23//common//monaco-editor//min//vs' }}); require(['vs/editor/editor.main'], function() { var editor = monaco.editor.create(document.getElementById('container'), { value: [ 'function x() {', '\tconsole.log("Hello world!");', '}' ].join('\n'), language: 'javascript' }); }); </script> </body> </html>
3.執行結果
