专栏首页GIS讲堂aceEditor实现类似于codepen的效果

aceEditor实现类似于codepen的效果

版权声明:本文为博主原创文章,遵循 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS+JS实现tab标签切换

    循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

    lzugis
  • 共享个地图控件的样式

    源代码下载地址:http://download.csdn.net/detail/gisshixisheng/9008937

    lzugis
  • jquery自定义插件——window的实现

    lzugis
  • SpringBoot-10-之初阶整合篇(下)

    张风捷特烈
  • css display table-cell

    display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

    bear_fish
  • 模拟微信支付宝密码输入框的效果

    中午听到别人在讨论微信的支付框以及支付宝的支付框,于是自己写了个demo出来,原理很简单,通过隐藏input,使用label控制显示,实现起来很容易。唤起数字键...

    练小习
  • SpringBoot技术栈搭建个人博客【前台开发/项目总结】

    先吐槽一句..写页面是真的不擅长,然后限于时间的问题,我开始考虑换用Bootstrap来完成页面的编写,因为时间有限(我得在实习完之前把所有页面开发完),学习V...

    我没有三颗心脏
  • 【前端】:浏览器渲染模式

    在很久以前的网络上,页面通常有两种版本:为网景(Netscape)的 Navigator准备的版本以及为微软(Microsoft)的 Internet Expl...

    WEBJ2EE
  • jquery cookie示例 - 只提示一次的弹框

    经常有些网站在访问的时候,就是有一个弹框介绍一下通知内容。然后点击已读之后,就不会再弹出了。

    Devops海洋的渔夫
  • 杨老师课堂之JavaScript定时器案例的红绿灯设计

    杨校

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动