zoukankan      html  css  js  c++  java
  • ace.js实现一个在线代码编辑器

    效果如下:

      

    步骤:

    1.css样式如下

    .left-part{position:absolute;left:0;top:0;40%;height:100%;z-index:1;}
    .btn-wrap{background:#f3f3f3;text-align:right;position:relative;z-index:1;box-shadow:0 5px 10px #e8e3e3;}
    .right-part{position:absolute;right:0;top:0;background:#f3f3f3!important;60%;height:100%;}
    #editor {margin: 0;height:100%;100%;border-right:1px solid #ddd;}
    

    2.html

     <div class="left-part">
        <div class="btn-wrap">
          <button id="submit">运行</button>
        </div>
        <pre id="editor"></pre>
      </div>
      <div class="right-part">
        <div id="main"  style="100%;height:400px;"></div>
      </div>
    

    3.js

    <script src="jquery.js"></script>
    <script type="text/javascript" src='echarts.js'></script>
    <script type="text/javascript" src='lodash.js'></script>
    <script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        //editor.setTheme("ace/theme/twilight");
        editor.session.setMode("ace/mode/javascript");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        
        var runDebounce = _.debounce(function () {
            if(!hasEditorError()) {
              changeChart()
            }
        }, 500, {
            trailing: true
        });
    
        // 编辑器上的内容改变时触发
        editor.on('change', function() {
            runDebounce()             
        });
        // 请求js配置项
        $.ajax('1.js', {
              dataType: 'text',
              success: function (data) {
                  editor.setValue(data, -1);
              }
          }).fail(function () {
              console.log('加载图表失败!');
          });
        // 判断是否编辑器有误
        function hasEditorError() {
            var annotations = editor.getSession().getAnnotations();
            for (var aid = 0, alen = annotations.length; aid < alen; ++aid) {
                if (annotations[aid].type === 'error') {
                    return true;
                }
            }
            return false;
        }
        // 更改图表
        function changeChart() {
          try{
            var option;
            eval(editor.getValue())
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption(option);
          }catch(e){
            console.log('编辑有误')
          }
          
        }
        var submit = document.querySelector('#submit');
        submit.addEventListener('click', function() {
            changeChart()
        })
    </script>
    

      

  • 相关阅读:
    android中图型的阴影效果(shadow-effect-with-custom-shapes)
    git的经常使用命令
    C# vs Java
    Android-68-Tomcat各种启动错误的解决的方法,如:Exception in thread &quot;Thread-6&quot; NoClassDefFoundError,Document base E:
    Java高级程序猿技术积累
    Floodlight下发流表过程分析
    Maximal Rectangle [leetcode] 的三种思路
    C++实现顺序栈的基本功能
    ZOJ 1654 Place the Robots(最大匹配)
    [2-SAT] poj 3207 Ikki&#39;s Story IV
  • 原文地址:https://www.cnblogs.com/hesj/p/11224768.html
Copyright © 2011-2022 走看看