前言
monaco editor是微软开源的一款web版代码编辑器。它支持智能提示，代码高亮，代码格式化。
笔者在建造PrvtCMS时，需要用到在线代码编辑器，用于编辑模板。尝试过不同产品，最后使用了monaco editor，它与VS Code同一个祖籍，应用起来也方便。下面我们直接查看实际应用例子。
效果图
效果图
安装
npm i monaco-editor 引用
const monaco = require('monaco-editor');
import 'monaco-editor/esm/vs/basic-languages/html/html.contribution';
import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js'; 制作容器
<div id="codding_container2">
<div style="position:relative;">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"> <a href="#codding_css" aria-controls="css" role="tab" data-toggle="tab">css</a></li>
<li role="presentation" class="active"><a href="#codding_html" aria-controls="html" role="tab" data-toggle="tab">html</a></li>
<li role="presentation" style="display:none;"><a href="#codding_script" aria-controls="script" role="tab" data-toggle="tab">script</a></li>
</ul>
<div class="tab-content" style="height:calc(100% - 41px)">
<div role="tabpanel" style="height:100%;" class="tab-pane active" id="codding_css"></div>
<div role="tabpanel" style="height:100%;" class="tab-pane active" id="codding_html"></div>
<div role="tabpanel" style="height:100%;" class="tab-pane active" id="codding_script"></div>
</div>
<div style="position:absolute;padding:10px;border:1px solid #dddddd;top:0;right:0;" onclick="document.getElementById('iframeResult').className = document.getElementById('iframeResult').className ? '' :'view-min'">宽度</div>
</div>
<div id="codding_preview"></div>
</div> 创建编辑器
// 创建编辑器
this.codeEditor = monaco.editor.create(document.getElementById("codding_html") as any, {
value: this.template_content || '',
language: 'html'
});
this.codeEditorOfCss = monaco.editor.create(document.getElementById("codding_css") as any, {
value: this.template_style || '',
language: 'css'
});
// 内容发生变更时，预览效果
this.codeEditor.onDidChangeModelContent(this.submitTryit);
this.codeEditorOfCss.onDidChangeModelContent(this.submitTryit);
//初始化预览效果
this.submitTryit(); 初始化预览
submitTryit() {
// 获取编辑器内容
this.template_content = this.codeEditor.getValue();
this.template_style = this.codeEditorOfCss.getValue();
// 实时预览
var ifr = document.createElement("iframe") as any;
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
$('#codding_preview').html('');
$('#codding_preview').append(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
var htmlContent = this.template_content
//** ...
//** 其他代码 htmlContent = `<body>${htmlContent}</body>`
//** ...
ifrw.document.open();
ifrw.document.write(htmlContent);
ifrw.document.close();
} 人人为我，我为人人，谢谢您的浏览，我们一起加油吧。
![Porsche911CarreraGTS"LeMansCentenaireEdition"#我不懂车#[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)