Author:
Filed Under: ASP.Net  |  Rich Text Editor  |  JQuery
Published Date: Dec 15, 2012
Views: 2314
 

Abstract: Here Mudassar Ahmed Khan has explained with an example and attached sample code, how to Upload, add and Display Image dynamically in TinyMCE Editor TextBox using jQuery Uploadify Plugin AJAX and Progress Bar without refreshing the Page in ASP.Net.


Download Sample View Demo 0
In this article I will explain how to upload image and then display the same in TinyMCE TextBox Editor.
Note: For details on how to use TinyMCE Editors and Uploadify Plugin. Kindly refer
 
Below is the HTML Markup of the Page, where we have the TinyMCE and Uploadify Plugin implemented.
<head runat="server">
    <title></title>
    <link rel="Stylesheet" type="text/css" href="CSS/uploadify.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.uploadify.js"></script>
    <script type="text/javascript" src="jscripts/tiny_mce/jquery.tinymce.js"></script>
    <script type="text/javascript">
        $(function () {
            $('textarea').tinymce({
                script_url: 'jscripts/tiny_mce/tiny_mce.js',
                theme: "advanced",
                plugins: "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
                theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,spellchecker",
                theme_advanced_buttons2: "",
                theme_advanced_buttons3: "",
                theme_advanced_buttons4: "",
                theme_advanced_toolbar_location: "top",
                theme_advanced_toolbar_align: "left",
                theme_advanced_statusbar_location: "bottom",
                theme_advanced_resizing: true,
                height: 200,
                skin: "o2k7",
                skin_variant: "silver"
            });
            $("[id*=FileUpload1]").fileUpload({
                'uploader': 'scripts/uploader.swf',
                'cancelImg': 'images/cancel.png',
                'buttonText': 'Browse Files',
                'script': 'Upload.ashx',
                'folder': 'uploads',
                'fileDesc': 'Image Files',
                'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
                'multi': true,
                'auto': true,
                'onComplete': function (event, ID, fileObj, response, data) {
                    var img = "<img style = 'height:80px;width:80px' src = '" + fileObj.filePath + "' />";
                    tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding: 40px">
        <asp:FileUpload ID="FileUpload1" runat="server" /><br />
        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
    </div>
    </form>
</body>
</html>
 
Above you will notice that we added the following OnComplete event to the Uploadify Plugin which is raiased when the FileUpload Process is completed.
'onComplete': function (event, ID, fileObj, response, data) {
    var img = "<img style = 'height:80px;width:80px' src = '" + response + "' />";
    tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
}
 
Here I first create a string of HTML Image where I set the path of the Image file from the response object of the OnComplete event.
Then the HTML string of image is inserted in the TinyMCE Editor, which makes it display as Image.
Note: The code for Upload.ashx in VB.Net and C# is available at Implement TinyMCE Editor in ASP.Net using C# and VB.Net
 
Demo
 
Downloads
 
 





Related Articles

Comments
No comments have been added to this article.


Add Comment

You can add your comment about this article using the form below. Make sure you provide a valid email address
else you won't be notified when the author replies to your comment

Please note that all comments are moderated and will be deleted if they are
  • Not relavant to the article
  • Spam
  • Advertising campaigns or links to other sites
  • Abusive content.
Please do not post code, scripts or snippets.

Name*: Required
Email*: Required
Comment*: Required
Security code*: CaptchaInvalid Security Code