Check Out The Latest Themes And Exclusive Deals And Offers On Themes
In Our Deals For Web Developers Section


Join Today And Get All The 87 Themes In Just $69! Join Today

Embed CKEditor In HTML Page Using JavaScript

Saturday, Jan 21, 2017

Tags:- JavaScript HTML PHP


Text Editor is always one of the important choice of website publisher because it is the only medium where your user connect with you on your website by means of writing comments, asking questions or by giving answers so you have to create or add a good text editor in your website and creating a text editor from scratch is a lengthy process and adding a text editor is easy and quick process because we have so many ready to use fully customisable text editor available to use.So, in this tutorial we will show you how to embed CKEditor in your HTML page using JavaScript.You may also like Convert URL Text Into Links Using JavaScript.


Embed CKEditor Using JavaScript


To Embed CKEditor It Takes Only Three Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a PHP file to display the submitted data
  3. Make a CSS file and define styling


Step 1.Make a HTML file and define markup and scripting

We make a HTML file and save it with a name editor.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="editor_style.css">
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded',function()
{
 CKEDITOR.replace( 'text_editor' );	
});
</script>
</head>
<body>
<div id="wrapper">

<div id="editor_div">
 <form method="post" action="display_text.php">
  <textarea id="text_editor"  name="text_editor"></textarea>
  <input type="submit" name="get_text" value="SUBMIT TEXT">
 </form>
</div>

</div>
</body>
</html>

In this step we include ckeditor.js file you have to download the CKEditor and then we create a form to submit and send value to 'display_text.php' file just to show you the full working of CKEditor.You may also like Disable Text Selection Using CSS.



Step 2.Make a PHP file to display the submitted data

We make a PHP file and save it with a name display_text.php

<?php
if(isset($_POST['get_text']))
{
 echo $_POST['text_editor'];
}
?>

In this step we simply get the text value from the CKEditor text area and then display it. Always validate data before and after submitting.



Step 3.Make a CSS file and define styling

We make a CSS file and save it with a name editor_style.css

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#A4A4A4;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
h1
{
 margin-top:50px;
 color:#424242;
 font-size:45px;
}
h1 p
{
 font-size:14px;
}
#editor_div
{
 width:500px;
 margin-left:240px;
}
#editor_div input[type="submit"]
{
 width:500px;
 margin-top:10px;
 height:50px;
 background-color:#585858;
 border:none;
 border-bottom:7px solid #424242;
 color:white;
 border-radius:3px;
 font-size:16px;
}

You can also view our tutorial Make Your Own Captcha System Using PHP And Ajax to add more functionality to this code and avoid spamming.

Thats all, this is how to embed CKEditor in your HTML page using JavaScript and HTML.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email