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
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.
Hello Tamilmani,
Take the time needed to test this within your project. I will be waiting for your feedback.
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>