如何编写 Cloud9 JavaScript IDE 的功能扩展

{
name   : "JSON Formatter",
dev: "Your Name Here",
alone  : true,
type   : ext.GENERAL,
markup : markup,

hook: function(){},
init: function(){},
enable  : function(){},
disable : function(){},
destroy : function(){}
}

属性

方法

实现 Format JSON扩展

{
name   : "JSON Formatter",
dev: "Ajax.org",
alone  : true,
type   : ext.GENERAL,
markup : markup,

nodes : [],

hook : function(){
var _self = this;
this.nodes.push(
mnuEdit.appendChild(new apf.item({
caption : "Format JSON",
onclick : function(){
ext.initExtension(_self);
_self.winFormat.show();
}
}))
);
},

init : function(amlNode){
this.winFormat = winFormat;
},

enable : function(){
this.nodes.each(function(item){
item.enable();
});
},

disable : function(){
this.nodes.each(function(item){
item.disable();
});
},

destroy : function(){
this.nodes.each(function(item){
item.destroy(true,true);
});
this.nodes = [];
this.winFormat.destroy(true,true);
}
}

<a:hbox>
<a:vbox />
<a:vbox />
<a:vbox />
</a:hbox>

vbMain.selectSingleNode("a:hbox/a:vbox[2]");

MarkupUI 标记

<a:application xmlns:a="http://ajax.org/2005/aml">
<!-- Your UI markup here -->
</a:application>

<a:window
id= "winFormat"
title = "Format JSON"
center= "true"
modal = "false"
buttons   = "close"
kbclose   = "true"
width = "200">
<a:vbox>
<a:hbox padding="5" edge="10">
<a:label width="100">Indentation</a:label>
<a:spinner id="spIndent" flex="1" min="1" max="20" />
</a:hbox>
<a:divider />
<a:hbox pack="end" padding="5" edge="10 10 5 10">
<a:button default="2" caption="Format"
onclick = "
require('ext/formatjson/formatjson').format(spIndent.value);
"/>
<a:button onclick="winFormat.hide()">Done</a:button>
</a:hbox>
</a:vbox>
</a:window>

自定义函数

{
...

format : function(indent){
//获取当前编辑器
var editor = editors.currentEditor;

//从当前编辑器获取选中的对象
var sel   = editor.getSelection();

//获取当前的文档对象引用
var doc   = editor.getDocument();

//获取当前选中对象的range对象
var range = sel.getRange();

//从range对象获取选中的文本
var value = doc.getTextRange(range);

//尝试将选中的文本转换为JSON，并格式化
//然后再回转为文本字符串，如果出现错误则给用户显示错误.
try{
value = JSON.stringify(JSON.parse(value),null,indent);
}
catch(e){
util.alert(
"Invalid JSON",
"The selection contains an invalid or incomplete JSON string",
"Please correct the JSON and try again");
return;
}

//如果格式化成功则用格式化后值替换掉range对象
var end = doc.replace(range,value);

//用格式化的值更新当前选中的部分

},

...
}

Key快捷键绑定

...

"ext" : {
...
"formatjson" : {
"format" : "Ctrl-Shift-J" // Or "Command-Shift-J" for the mac file
},
...
}

...

hotkeys  : {"format":1},
hotitems : {},

this.hotitems["format"] = [this.nodes[0]];