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.

7-editor

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.

Usage:

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.

Code:

 

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 *