aceEditor实现类似于codepen的效果

lzugis

发布于 2019-11-21 17:07:24

7440

发布于 2019-11-21 17:07:24

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

本文链接：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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-11-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

https