TextEditor : manage hyperlink and pictures

[fguibert]

First of all, thanks for the TextEditor extension, a very useful feature

Is there a way to activate a hyperlink toolbar button and/or a <IMG> tag manager to insert pictures too? Or maybe it will be on next release?

thanks a lot

[stworthy]

The 'img' command can be defined as:

Code:

$.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.

Code:

var toolbar = $.extend([], $.fn.texteditor.defaults.toolbar);
toolbar.push('img');
$('#te').texteditor({
toolbar: toolbar
});

[fguibert]

OK it works thanks a lot stworthy  !
is there a similar way to get hyperlinks working ? I will be able to remove TinyMCE

[stworthy]

Please download a newer version  from https://www.jeasyui.com/extension/texteditor.php. The 'insertimage' and 'insertlink' are the built-in tools now.

[fguibert]

great sworthy, thanks a lot !
now only one button "edit HTML source" is missing and this editor would be perfect (perhaps in a further release)