概述

本文讲述如何应用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};// htmlvar 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();});// cssvar 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();});// jsvar 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
联系方式

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	niujp08@qq.com
webgis群	452117357
Android群	337469080
GIS数据可视化群	458292378

aceEditor实现类似于codepen的效果相关推荐

为什么我从PR里面导出来的视频，在电脑上可以正常播放，但是上传到天猫、淘宝、抖音、微信等平台后就变的模糊，类似于重影的效果
为什么我从PR里面导出来的视频,在电脑上可以正常播放,但是上传到天猫.淘宝.抖音.微信等平台后就变的模糊,类似于重影的效果.尤其是加速后的视频,比如2倍速度.或倍速度,模糊的会越来越严重. 类似于这样 ...
将你的 QQ 头像（或者微博头像）右上角加上红色的数字，类似于微信未读信息数量那种提示效果。类似于图中效果
第 0000 题:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果这个问题需要用到PIL库,涉及到一些非常基本的用法.代码如下: from ...
vue页面切换动画-类似于轮播效果、渲染列表给每一行数据加上显示动画
vue页面切换动画-类似于轮播效果 <transition :name="transitionName"><router-view/> </trans ...
vue可编辑div_vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable="true" 的 div , ...
html中实现类似于弹幕的效果代码,javascript实现弹幕效果
javascript弹幕 #play{ width:600px; height:500px; background-color:#000; } #tangmu{ width:600px; height ...
codepen_1. Codepen
codepen Are you a type of programmer who loves to write every single line of code? Or the one who kn ...
用Flutter实现一个类似于轮播图的效果
效果图: 过程脑洞自补!!! 类似于上图的效果,我们应该能想到用PageView来实现,但是思来想去,PageView官方并没有给自定义的参数,就是我们需要的下面的指示器的效果.现在我就来说下一下怎么 ...
【每日python小程序练习】第一天：将你的 QQ 头像（或者微博头像）右上角加上红色的数字，类似于微信未读信息数量那种提示效果。
题目:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果 from PIL import Image,ImageDraw,ImageFont ...
Android中实现整个视图切换的左右滑动效果
Android中提供了一个Gallary,可以实现图片或者文本的左右滑动效果. 如何让整个视图都能实现左右滑动,达到类似于Gallary的效果呢?可以直接用一个开源的ViewFlow来实现. 项目 ...

aceEditor实现类似于codepen的效果

概述

实现效果

实现代码

aceEditor实现类似于codepen的效果相关推荐

最新文章

热门文章