Category: Javascript

In CKEditor by default file browser option is not enabled.

You can only add a file to an editor with URL.

To add file browser option require to update CKEditor configuration and use options while initialization.

In this tutorial, I show how you can add file browser option in CKEditor and upload it with PHP.

Custom file upload in CKEditor with PHP

AJAX Javascript PHP

CKEditor is a WYSIWYG HTML editor.

It makes HTML textarea lot more user-friendly by providing various features like – adding images, writing HTML code, formatting text, etc.

This can also be added to HTML containers.

It does not depend on other libraries like – jQuery and can be used in 3 different modes – Article Editor, Document Editor, and Inline Editor.

Different options are available to customize the editor.

In this tutorial, I am adding Article and Inline mode CKEditor on the same page and save it to MySQL database on submit with PHP.

Integrate CKEditor to HTML page and save to MySQL with PHP

Javascript PHP

Dropzone is a JavaScript library which allows uploading file by drag’n’drop and display the file preview after upload.

It is easier to add to the page and it does not depend on any library like jQuery.

The file will upload to the server via AJAX.

In this tutorial, I show how you can use Dropzone library to upload the file in CodeIgniter.

Drag and Drop file upload with Dropzone in CodeIgniter

AJAX CodeIgniter Javascript PHP

With the use of Speech Recognition API, you can enable the web browser to take speech input on the page and convert it into text.

For accessing this on the page need to allow microphone access by the user.

In this tutorial, I am creating an example where allowing the users to search posts by speech. On the basis of speech recognition display response on the screen using jQuery AJAX.

How to Add Speech Recognition to the website - JavaScript

AJAX How To Javascript JQuery PHP

In TinyMCE editor to view image and media options in the menu or in toolbar need to load them by using plugins option while initializing.

This adds them to the editor but you can load external file by passing the source path. It does not allow to browse any file within the system.

The browse button easily added by defining file_picker_callback option.

This only adds browse button but not allow file selection.

Within the file_picker_callback function need to write the script to enable file selection and upload the file to the server.

For upload the file to the server I am using PHP.

Add Browse Button and Upload File in TinyMCE

How To Javascript

TinyMCE is a WYSIWYG editor where you can edit and preview the end result of the document.

In TinyMCE by default, all labels are in US English (en_US) but it is customizable to any other language using language option.

There is more than 50 languages script package is available which can be downloaded and use in language defining.

How to change language in TinyMCE editor

How To Javascript

By enabling the social login on the website it is easier for the user to easily register or sign in on the website without entering its details.

In this tutorial, I am adding LinkedIn Login on the webpage.

LinkedIn provides a very simple JavaScript API for developers to fetch the user details after successfully authorization and use it for registration or login.

How to Login LinkedIn with JavaScript API

How To Javascript JQuery PHP