Monaco Editor 添加可编辑div展示框教程
<h2>为 Monaco Editor 代码添加可编辑 div 展示框</h2>
<p>本文将介绍如何在 Monaco Editor 中使用装饰器功能，在代码前面添加一个可以编辑的 <code><div></code> 展示框，方便实时预览代码效果。</p>
<h3>实现步骤</h3>
<ol>
<li>
<p>**引入 Monaco Editor:**html<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <link rel='stylesheet' data-name='vs/editor/editor.main' href='https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs/editor/editor.main.css'> <style> #editor { width: 800px; height: 600px; } #preview { width: 100%; height: 200px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; } </style></head><body> <div id='editor'></div> <div id='preview' contenteditable='true'></div></p>
<script src='https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs/loader.js'></script> <script> // ... 后续代码 </script></body></html>
</li>
<li>
<p>**创建 Monaco Editor 实例和展示框:**javascriptrequire.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs' }});</p>
</li>
</ol>
<p>require(['vs/editor/editor.main'], function() { var editor = monaco.editor.create(document.getElementById('editor'), { value: 'Your code goes here...', language: 'javascript', theme: 'vs-dark' });</p>
<pre><code>var preview = document.getElementById('preview'); // ... 后续代码});
</code></pre>
<ol start="3">
<li>**同步代码到展示框:**javascript// ... 上文代码</li>
</ol>
<p>editor.onDidChangeModelContent(function() { preview.innerText = editor.getValue();});</p>
<h3>完整代码javascript<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <link rel='stylesheet' data-name='vs/editor/editor.main' href='https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs/editor/editor.main.css'> <style> #editor { width: 800px; height: 600px; } #preview { width: 100%; height: 200px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; } </style></head><body> <div id='editor'></div> <div id='preview' contenteditable='true'></div></h3>
<pre><code><script src='https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs/loader.js'></script> <script> require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs' }});
require(['vs/editor/editor.main'], function() { var editor = monaco.editor.create(document.getElementById('editor'), { value: 'Your code goes here...', language: 'javascript', theme: 'vs-dark' });
var preview = document.getElementById('preview');
editor.onDidChangeModelContent(function() { preview.innerText = editor.getValue(); }); }); </script></body></html>
</code></pre>
<p>这段代码创建了一个 Monaco Editor 实例和一个可编辑的 <code><div></code> 展示框，并将编辑器中的代码实时同步到展示框中。您可以根据需要调整展示框的样式和行为。</p>
原文地址: https://www.cveoy.top/t/topic/R73 著作权归作者所有。请勿转载和采集!