多编辑器
This commit is contained in:
Van
parent
f01fea661f
commit
33e8b843ae
|
|
@ -0,0 +1,12 @@
|
|||
package main
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"time"
|
||||
)
|
||||
|
||||
func main() {
|
||||
fmt.Println("Hello, 世界")
|
||||
|
||||
time.Sleep(time.Second)
|
||||
}
|
||||
|
|
@ -44,9 +44,20 @@ ul {
|
|||
|
||||
|
||||
.edit-panel {
|
||||
background-color: #262626;
|
||||
height: 450px;
|
||||
left: 20%;
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
.edit-panel .tabs span {
|
||||
background-color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edit-panel .tabs span.current {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.output {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
(function(mod) {
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var editors = {
|
||||
data: [],
|
||||
init: function() {
|
||||
editors._initAutocomplete();
|
||||
editors._initTabs();
|
||||
},
|
||||
_initAutocomplete: function() {
|
||||
CodeMirror.registerHelper("hint", "go", function(editor, options) {
|
||||
var cur = editor.getCursor();
|
||||
|
||||
|
|
@ -34,25 +36,88 @@
|
|||
|
||||
return {list: autocompleteHints, from: cur, to: cur};
|
||||
});
|
||||
});
|
||||
|
||||
CodeMirror.commands.autocomplete = function(cm) {
|
||||
cm.showHint({hint: CodeMirror.hint.go});
|
||||
};
|
||||
},
|
||||
_initTabs: function() {
|
||||
var $tabsPanel = $(".edit-panel .tabs-panel"),
|
||||
$tabs = $(".edit-panel .tabs");
|
||||
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
|
||||
$tabs.on("click", "span", function() {
|
||||
var $it = $(this);
|
||||
if ($it.hasClass("current")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var id = $it.data("id");
|
||||
|
||||
$tabs.children("span").removeClass("current");
|
||||
$tabsPanel.children("div").hide();
|
||||
|
||||
$it.addClass("current");
|
||||
$("#editor" + id).parent().show();
|
||||
|
||||
// set tree node selected
|
||||
var node = tree.fileTree.getNodeByTId(id);
|
||||
tree.fileTree.selectNode(node);
|
||||
wide.curNode = node;
|
||||
});
|
||||
},
|
||||
_selectTab: function(id) {
|
||||
var $tabsPanel = $(".edit-panel .tabs-panel"),
|
||||
$tabs = $(".edit-panel .tabs");
|
||||
|
||||
var $currentTab = $tabs.children(".current");
|
||||
if ($currentTab.data("id") === id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$tabs.children("span").removeClass("current");
|
||||
$tabsPanel.children("div").hide();
|
||||
|
||||
$tabs.children("span[data-id='" + id + "']").addClass("current");
|
||||
$("#editor" + id).parent().show();
|
||||
},
|
||||
newEditor: function(data) {
|
||||
var id = wide.curNode.tId;
|
||||
for (var i = 0, ii = editors.data.length; i < ii; i++) {
|
||||
if (editors.data[i].id === id) {
|
||||
editors._selectTab(id);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
var $tabsPanel = $(".edit-panel .tabs-panel"),
|
||||
$tabs = $(".edit-panel .tabs");
|
||||
|
||||
$tabs.children("span").removeClass("current");
|
||||
$tabsPanel.children("div").hide();
|
||||
|
||||
$tabsPanel.append('<div><textarea id="editor' + id + '" name="code"></textarea></div>');
|
||||
$tabs.append('<span data-id="' + id + '" class="current">' + wide.curNode.name + '</span>');
|
||||
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById("editor" + id), {
|
||||
lineNumbers: true,
|
||||
theme: 'lesser-dark',
|
||||
extraKeys: {
|
||||
"Ctrl-\\": "autocomplete"
|
||||
}
|
||||
});
|
||||
|
||||
editor.setSize('100%', 450);
|
||||
editor.setValue(data.content);
|
||||
editor.setOption("mode", data.mode);
|
||||
|
||||
editor.addKeyMap({
|
||||
wide.curEditor = editor;
|
||||
editors.data.push({
|
||||
"editor": editor,
|
||||
"id": id
|
||||
});
|
||||
},
|
||||
removeEditor: function() {
|
||||
|
||||
editor.on('keyup', function(cm, event) {
|
||||
}
|
||||
};
|
||||
|
||||
});
|
||||
editors.init();
|
||||
|
|
@ -115,10 +115,10 @@ var tree = {
|
|||
data: JSON.stringify(request),
|
||||
dataType: "json",
|
||||
success: function(data) {
|
||||
if (data.succ) {
|
||||
editor.setValue(data.content);
|
||||
editor.setOption("mode", data.mode);
|
||||
if (!data.succ) {
|
||||
return false;
|
||||
}
|
||||
editors.newEditor(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -126,6 +126,7 @@ var tree = {
|
|||
}
|
||||
};
|
||||
tree.fileTree = $.fn.zTree.init($("#files"), setting, data.root.children);
|
||||
// TODO: remove
|
||||
tree.fileTree.expandAll(true);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@ shellWS.onerror = function(e) {
|
|||
};
|
||||
|
||||
var wide = {
|
||||
curFile: "",
|
||||
curNode: "",
|
||||
curEditor: "",
|
||||
init: function() {
|
||||
$('#shellInput').keydown(function(event) {
|
||||
if (13 === event.which) {
|
||||
|
|
@ -61,8 +62,8 @@ var wide = {
|
|||
},
|
||||
save: function() {
|
||||
var request = {
|
||||
"file": wide.curFile,
|
||||
"code": editor.getValue()
|
||||
"file": wide.curNode.path,
|
||||
"code": wide.curEditor.getValue()
|
||||
};
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
|
|
@ -76,8 +77,8 @@ var wide = {
|
|||
},
|
||||
run: function() {
|
||||
var request = {
|
||||
"file": wide.curFile,
|
||||
"code": editor.getValue()
|
||||
"file": wide.curNode.path,
|
||||
"code": wide.curEditor.getValue()
|
||||
};
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
|
|
@ -94,10 +95,10 @@ var wide = {
|
|||
},
|
||||
fmt: function() {
|
||||
var request = {
|
||||
"file": wide.curFile,
|
||||
"code": editor.getValue(),
|
||||
"cursorLine": editor.getCursor().line,
|
||||
"cursorCh": editor.getCursor().ch
|
||||
"file": wide.curNode.path,
|
||||
"code": wide.curEditor.getValue(),
|
||||
"cursorLine": wide.curEditor.getCursor().line,
|
||||
"cursorCh": wide.curEditor.getCursor().ch
|
||||
};
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
|
|
@ -106,7 +107,7 @@ var wide = {
|
|||
dataType: "json",
|
||||
success: function(data) {
|
||||
if (data.succ) {
|
||||
editor.setValue(data.code);
|
||||
wide.curEditor.setValue(data.code);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@
|
|||
</div>
|
||||
|
||||
<div class="edit-panel">
|
||||
<textarea id="code" name="code"></textarea>
|
||||
<div class="tabs"></div>
|
||||
<div class="tabs-panel"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -43,7 +44,7 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<textarea id="output" class="output" rows="10"></textarea>
|
||||
<textarea id="output" class="output" rows="7"></textarea>
|
||||
|
||||
<div class="shell">
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue