ace.js实现IDE多标签代码编辑器
ace.js是一款强大的代码编辑器，支持110种开发语言，安装官方的说法，可以媲美本地的开发工具vscode等，今天我们来演示一下如何使用ace.js来实现一个多标签的代码编辑器功能，先看效果：
原理其实很简单，就是在创建ace的时候，创建一个tab标签, 并保存到全局变量中，如下：
editor_arr.push({
"fileid": fileid,
"editor": editor,
"editorid": editorid,
"tabid": "tab" + fileid,
});
我们来看看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
var editor_arr = [];
bready(function() {
$("#addnewbtn").click(function() {
openeditor(Math.random()*100000000000000000, "unamed");
});
});
function showeditor(fileid) {
console.log(fileid);
$("#bfweditor pre").hide();
$("#file_tab ul li").removeClass("file_selected");
if (editor_arr.length > 0) {
for (var i = 0; i < editor_arr.length; i++) {
if (fileid == editor_arr[i].fileid) {
$("#" + editor_arr[i].tabid).addClass("file_selected");
$("#" + editor_arr[i].editorid).show();
return editor_arr[i].editor;
}
}
}
return null;
};
function openeditor(fileid, filename) {
var editor = showeditor(fileid);
if (editor != null) {
return;
}
$("#file_tab ul li").removeClass("file_selected");
$("#addnewbtn").before("<li fileid='"+fileid+"' id='tab" + filei...点击查看剩余70%
{{collectdata}}
网友评论0