版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/GISShiXiSheng/article/details/103152224
本文讲述如何应用aceEditor实现类似于codepen的在线编辑预览效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<link href="static/css/ace.css" rel="stylesheet">
</head>
<body>
<ul class="layout-code">
<li>
<div class="title">HTML代码</div>
<div class="content">
<pre id="editorHtml" class="editor"></pre>
</div>
</li>
<li>
<div class="title">css代码</div>
<div class="content">
<pre id="editorCss" class="editor"></pre>
</div>
</li>
<li>
<div class="title">javascript代码</div>
<div class="content">
<pre id="editorJs" class="editor"></pre>
</div>
</li>
</ul>
<div class="layout-preview">
<div class="title">效果预览</div>
<div class="content">
<iframe id="preview" frameborder="0"></iframe>
</div>
</div>
<script src="static/libs/ace-src/ace.js"></script>
<script src="static/libs/ace-src/ext-language_tools.js"></script>
<script src="static/libs/ace-src/ext-beautify.js"></script>
<script src="static/libs/ace-src/mode-html.js"></script>
<script src="static/libs/ace-src/mode-css.js"></script>
<script src="static/libs/ace-src/mode-javascript.js"></script>
<script src="static/libs/ace-src/theme-chaos.js"></script>
<script>
var option = {
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false
};
// html
var editorHtml = ace.edit("editorHtml");
editorHtml.session.setMode("ace/mode/html");
editorHtml.setTheme("ace/theme/chaos");
editorHtml.setOptions(option);
editorHtml.setValue("<div id='map'></div>");
editorHtml.moveCursorTo(0, 0);
editorHtml.session.on('change', function(e) {
runAllCodes();
});
// css
var editorCss = ace.edit("editorCss");
editorCss.session.setMode("ace/mode/css");
editorCss.setTheme("ace/theme/chaos");
editorCss.setOptions(option);
editorCss.setValue("html,\n" +
"body,\n" +
"#map {\n" +
" width: 100%;\n" +
" height: 100%;\n" +
" margin: 0;\n" +
" padding: 0;\n" +
" overflow: hidden;\n" +
"}");
editorCss.moveCursorTo(0, 0);
editorCss.session.on('change', function(e) {
runAllCodes();
});
// js
var editorJs = ace.edit("editorJs");
editorJs.session.setMode("ace/mode/javascript");
editorJs.setTheme("ace/theme/chaos");
editorJs.setOptions(option);
editorJs.setValue("document.getElementById('map').innerText = 'Hello World!';");
editorJs.moveCursorTo(0, 0);
editorJs.session.on('change', function(e) {
runAllCodes();
});
runAllCodes();
function runAllCodes() {
var html = editorHtml.getValue();
var css = editorCss.getValue();
var js = editorJs.getValue();
var code = "<!DOCTYPE html>\n" +
"<html lang=\"en\">\n" +
"<head>\n" +
" <meta charset=\"UTF-8\">\n" +
" <title>Editor</title>\n" +
" <style>";
code += "\n" + css;
code +=
"\n </style>\n" +
"</head>\n" +
"<body>\n";
code += "\n" + html;
code +=
"\n <script>\n";
code += "\n" + js;
code +=
"\n <\/script>\n" +
"<\/body>\n" +
"</html>";
document.getElementById("preview").setAttribute("srcdoc", code);
}
</script>
</body>
</html>
@charset "utf-8";
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #F9F9F9;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #999;
}
html, body {
font-size: 14px;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.layout-code {
width: 100%;
height: 50%;
list-style: none;
margin: 0;
padding: 0;
li {
float: left;
width: calc(100% / 3);
height: 100%;
&:not(:last-child) {
box-sizing: border-box;
border-right: 1px solid #cccccc;
}
}
.title {
height: 40px;
line-height: 40px;
padding: 0 10px;
font-weight: bold;
}
.content {
height: calc(100% - 40px);
.editor {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-size: 16px;
line-height: 25px;
}
}
}
.layout-preview {
width: 100%;
height: 50%;
.title {
height: 40px;
line-height: 40px;
padding: 0 10px;
font-weight: bold;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
.content {
height: calc(100% - 40px);
iframe {
width: 100%;
height: 100%;
}
}
}
技术博客 CSDN:http://blog.csdn.NET/gisshixisheng 在线教程 https://edu.csdn.net/course/detail/799 https://edu.csdn.net/course/detail/7471
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有