Hi,
1. How to implement the external image upload option in Infragistics HTML Editor?
2. How to add customize button in HTML editor?
If any one suggest, how to do it in Infragistics HTML Editor.
Thanks
Tamilmani Mohan
Tamilmani,
Please let me know whether you are using the ASP.NET HTML Editor or the IgniteUI HTML Editor.
Hi Alan,
I am using IgniteUI HTML Editor
Hello Tamilmani,
Image uploading is available in the igHtmlEditor by design. In order to use it is needed to set the showInsertObjectToolbar option to true:
$(".selector").igHtmlEditor({
showInsertObjectToolbar: true
});
The insert image button is positioned in the insert object toolbar.
To your second question: to add a custom button in the igHtmlEditor it is needed to initialize a custom toolbar(see the code snippet below).
customToolbars: [
{
name: "customToolbar",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: [{
//Definition for custom button:
name: "customButton",
type: "button",
handler: function() { alert("Custom button clicked!");},
scope: this,
props: {
isImage: {
value: false,
action: '_isSelectedAction'
},
imageButtonTooltip: {
value: "Custom button tooltip",
action: '_tooltipAction'
imageButtonIcon: {
value: "ui-igbutton-bold",
action: '_buttonIconAction'
}
}…
More information on this topic could be found at the following resources:
http://help.infragistics.com/jQuery/2013.2/ui.igHtmlEditor (see the OPTIONS tab)
http://igniteui.com/html-editor/custom-toolbars-and-buttons
Hope this helps.
If you have any further questions or comments don’t hesitate to notify us.
Thanks.
I will check now
Hello Tamilmani
When you test it please let me know if this approach works for you.
Sorry,
I struggled with some other issues. So , i am not able test completely. I will test and update you.
I have tested the sample code.
I will try to write the sample code for to upload the image from local machine.
I will check and update to you.
I am just following up to check if you have any further questions regarding this scenario. If so, feel free to contact me again.
Combining the igUpload with the igHtmlEditor is possible approach for this scenario. When the image is uploaded on a server its URL could be pasted in the insert image pop-up in the igHtmlEditor.
I have added below resources regarding the igUpload usage:
http://jsfiddle.net/gh/get/jquery/1.9.1/igniteuisamples/jsfiddle-samples/tree/master/EN/HtmlSamples/file-upload/basic-usage/
http://help.infragistics.com/Doc/jQuery/Current/CLR4.0?page=igUpload_Overview.html
http://help.infragistics.com/jQuery/2013.2/ui.igupload
Hope this helps. If you still encounter any issues please provide me a sample reproducing them.
Look forward to your reply.
I have tried below code. Browse button is not triggered. Is there any idea?
Whether i need to custom popup box for image upload?
<script> $(function () { $("#upload").igUpload({ mode: "single", autostartupload: true, // to upload a file, you need a server-side handler progressUrl: "upload.php", controlId: "serverID" }); var height = $('html').hasClass('touch') ? 500 : 350;
$("#htmlEditor").igHtmlEditor({ width: "99%", showInsertObjectToolbar: true, height: height, customToolbars: [ { name: "customToolbar", collapseButtonIcon: "ui-igbutton-collapse", expandButtonIcon: "ui-igbutton-expand",
items: [{ //Definition for custom button: name: "customButton", type: "button", //handler: function() { alert("Custom button clicked!");}, handler:appendHTML, scope: this, props: { isImage: { value: false, action: '_isSelectedAction' },
imageButtonTooltip: { value: "Custom button tooltip", action: '_tooltipAction' }, imageButtonIcon: { value: "ui-igbutton-bold", action: '_buttonIconAction' }
}] }] });
}); function appendHTML(ui) { var currentContent = $("#htmlEditor").igHtmlEditor("getContent", "html");var content = "<p><input type='file' name='usr_img' id='upload'></p>"; $("#htmlEditor").igHtmlEditor("setContent", currentContent + content, "html"); } </script>
Take the time needed to test this within your project. I will be waiting for your feedback.