Integrate CKEditor in Html Form using Jquery

This is tutorial about integrating CKEditor in your web based form to provide extra text editing feature to your users, CKEditor has great text editing feature list which you can use to show text in better and fancy manner. This editor has features like Microsoft Word and you can set create headings styling font and applying bullet points and also you can import images in your paragraph. So here we’ll talk about adding this editor in your form in very simple manner.



ckeditor-1
First create a simple html form.

<!DOCTYPE html>
<html>
<head>
<title>CKEditor Demo</title>
</head>
<body>
<h1>Demo Form</h1>
<table>
	<tr>
		<td><b>Title:</b> </td>
		<td><input type="text" name="title"/></td>
	</tr>
	<tr>
		<td><b>Message:</b> </td>
		<td><textarea name="message"></textarea></td>
	</tr>
</table>
 
</body>
</html>

After that you have to add a CkEditor library file to display textarea as CKEditor, There are three types of library has provided by CKEditor Basic, Standard and full package, You can choose library as per your need and requirement, If you are working on very high configured editor then you must go for full package or you are looking a simple editor where user has some feature to format their message which he wants to send admin then your can use basic or standard package.
ckeditor

Add CKEditor library on your html page before body close tag.

<script src="//cdn.ckeditor.com/4.5.8/standard/ckeditor.js"></script>

Now add simple one line code to display message textarea as CKEditor, Don’t forget to add textarea name in CKEDITOR function.

<script>
	CKEDITOR.replace('message');
</script>

See live demo and download source code.

DEMO

DOWNLOAD



Yo can pass more configuration parameter in this function to apply more customization see official CKEditor documentation http://docs.cksource.com/Main_Page

Thanks 🙂

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.