EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: fguibert on May 04, 2018, 02:37:15 AM



Title: TextEditor : manage hyperlink and pictures
Post by: fguibert on May 04, 2018, 02:37:15 AM
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


Title: Re: TextEditor : manage hyperlink and pictures
Post by: stworthy on May 04, 2018, 08:27:38 PM
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
});


Title: Re: TextEditor : manage hyperlink and pictures
Post by: fguibert on May 07, 2018, 01:57:46 AM
OK it works thanks a lot stworthy  !
is there a similar way to get hyperlinks working ? I will be able to remove TinyMCE ;)


Title: Re: TextEditor : manage hyperlink and pictures
Post by: stworthy on May 07, 2018, 07:02:20 PM
Please download a newer version  from https://www.jeasyui.com/extension/texteditor.php. The 'insertimage' and 'insertlink' are the built-in tools now.


Title: Re: TextEditor : manage hyperlink and pictures
Post by: fguibert on May 18, 2018, 01:16:59 AM
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)