Hi Friends, Today I will tell you about how to add ckeditor in html form using jquery. It give you more editing feature to your message area just like adding images, adding link, remove link, adding tables, insert special characters, alignment, choose font, write html code, maximize your message area, and many more options. You have to write some code to add additional features in your blog. In this most of the wordpress blog features are also included.
If you want to learn jquery you can read Learn JQUERY Code Step By Step For Beginners.
It gives a extra editing feature to your user or customer and user will be happy.
You have to follow some steps to add ckeditor in html form using jquery. These steps are.
Step1: Create your HTML Form.
<!DOCTYPE html>
<html>
<head>
<title>Add CKEditor in Html Form using Jquery</title>
</head>
<body>
<h1>Add CKEditor in Html Form using Jquery</h1>
<table><tr>
<td><b>Your Title:</b> </td>
<td><input type="text" name="title"/></td>
</tr>
<tr>
<td><b>Your Message:</b> </td>
<td><textarea name="message"></textarea></td>
</tr>
</table>
</body>
</html>
Step2: Now you have to add some jquery code in the bottom of body section. CKEditor provides three library Basic, Standard and Full package. You can use any library. I will tell you about standard library. Write below code in your html page.
<script src="http://cdn.ckeditor.com/4.5.8/standard/ckeditor.js"></script>
You have to add the name of the textarea in the below script.
<script>
CKEDITOR.replace('message');
</script>
Step3: Enjoy additional features in your message area.
You can see the Live demo and download the code below.
Read About Other Interesting Things below.
If You like my blog, kindly Subscribe it.
Categories: Website Design
Leave a Reply