Text Editor with Ajax Image Uploader using Bootstrap & Tiny Wysiwyg

Today we’d like to share some experimental and creative image uploader effect with you.


Here we have used bootstrap for making some components. The editor part we taken from tiny wysiwyg editor. To upload the image by using ajax we have used JQuery $.Deferred() for handling Asynchronous Mechanism of file upload.


As this editor need ajax part. we need to port this code on either xampp or any other php container you are using.

  1. Download code from github https://github.com/gdbhosale88/WysiwygImageUpload.
  2. unzip the file into folder texteditor inside htdocs.
  3. open file uploadImage.php inside texteditor folder & edit variables $base_path$base_url according to your server paths.
  4. Now last part. Open file script.js within js folder & edit base_url for your configuration.
  5. Now open this application in browser: http://localhost/texteditor & see for your self.



I hope you enjoyed these effect and find them inspiring!

Download code from github: https://github.com/gdbhosale88/WysiwygImageUpload

Ganesh Bhosale

From a laptop to a full organization, Ganesh has traveled a tough road. A commando, armed with the latest tech & a huge warehouse of knowledge, he leads by example & is here for the long haul. His strong belief in giving back more has borne rich fruits, both for his employees & clients.

You may also like...

1 Response

  1. arun says:

    Hello Sir,

    This is arun from PPM Comapny, my question is how to configure textarea insted of
    i want to be configure div to textarea

Leave a Reply

Your email address will not be published. Required fields are marked *