ace编辑html,ace.js实现一个在线代码编辑器

效果如下:

步骤:

1.css样式如下

.left-part{position:absolute;left:0;top:0;width: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;width:60%;height:100%;}

#editor {margin: 0;height:100%;width:100%;border-right:1px solid #ddd;}

2.html

运行

3.js

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()

})