The 'img' command can be defined as:
$.extend($.fn.texteditor.defaults.commands, {
img: {
type: 'linkbutton',
iconCls: 'icon-man',
onClick: function(){
var te = $(this).texteditor('getEditor');
var opts = $(this).linkbutton('options');
if (!opts.dlg){
opts.dlg = $('<div style="padding:50px 20px"></div>').appendTo('body').dialog({
title: 'Insert a image',
width: 400,
modal: true,
border: 'thin',
buttons: [{
text: 'Insert',
handler: function(){
var img = input.textbox('getValue');
if ($.trim(img)){
var html = '<img src="'+img+'">';
te.texteditor('insertContent',html);
opts.dlg.dialog('close');
input.textbox('clear');
}
}
},{
text: 'Cancel',
handler: function(){
opts.dlg.dialog('close');
}
}]
});
var input = $('<input>').appendTo(opts.dlg);
input.textbox({
width: '100%',
prompt: 'Input a image'
});
}
opts.dlg.dialog('open');
}
}
});
Now append this 'img' command to the toolbar.
var toolbar = $.extend([], $.fn.texteditor.defaults.toolbar);
toolbar.push('img');
$('#te').texteditor({
toolbar: toolbar
});