How to implement HTML_Editor_in_your_website

How to implement HTML Editor in your website?

HTML Editor is an application that is used to view or edit or Replicate any webpage by copy and paste or drag and drop. The main feature of this HTML editor is you can easily replicate including the CSS Style like font family, color, style and so on.HTML Editor will give you split-screen view hence you can easily view the preview and edit the code in same time.

Now let we see how to implement HTML editor in your site.

Step 1

Download the pre-created source of HTML Editor Here. And extract all the files in a folder

Step 2

Create a file called index.php outside the extracted folder

Step 3

Paste the following code inside the index.php



mysql_connect(‘HostName’, ‘UserName’, ‘Password’) or die(‘Conn Err!!!!’);

mysql_select_db(‘Your DataBase Name’);


$content = $_POST[‘cms_short’];

mysql_query(“INSERT INTO ss_cms(CMS_DESC) VALUES(‘$content’)”) or die(“Insert Err!!”);



In the above code enter your Hostname, Username, Password and your Database name to connect with your database.

Step 4

After the end of php statement paste the following page

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>

<html xmlns=””>


<title>Edit Article</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

<script type=”text/javascript” src=”html_editor/ckeditor.js”></script>



<h1>Edit Article</h1>



The above code declares a javascript called ckeditor.js and rest of them are regular html code

Step 5

Call the java script function inside your HTML and create a form and paste it inside body tag.


<form name=”formdata” method=”post”>


<textarea cols=”80″ rows=”10″  name=”cms_short”>    </textarea>

<script type=”text/javascript”>

CKEDITOR.replace( ‘cms_short’ );


<input type=”submit” name=”send_data” value=”Submit”/>



The above code creates a form named formdata and inside that it creates a div tag.  Inside those div tag it creates a textarea with 80 column and 10 rows , name the text area as CMS_shorts. After that it declares a script in which replaces the cms_short with CKEDITOR.js. Under that create a button with name send_data.

Step 7

Declare a php to retrieve data to display your HTML in below HTML Editor.


<?php $get_tb = mysql_query(“SELECT * FROM ss_cms WHERE CMS_ID = ’64′”); $get_row = mysql_fetch_assoc($get_tb); ?>

<p> <?=$get_row[‘CMS_DESC’]; ?></p>

The above code will retrieve data from table name ss_cms and table row CMS_DESC in CMS_ID “64

Vola! You have successfully implemented HTML Editor in your website. If you feel that you have stuck at implementing the HTML Editor please don’t hesitate to contact us. Let us know how your implementation of HTML Editor works in your site below in the comments.


Ecommerce Website Development Company

Looking for Ecommerce Website Development Company?

How to implement HTML Editor in your website? by


  • All of these tips are great, that’s very interesting. I’m so tempted to try that myself.In your step by step procedure was very excellent,but you would think if it were effective.Can you please explain the step 5.Keep updating more information.