Embed CKEditor In HTML Page Using JavaScript

Last Updated : Jul 1, 2023

IN - JavaScript HTML PHP | Written & Updated By - Riya

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.

To Embed CKEditor It Takes Only Three Steps:-

Make a HTML file and define markup and scripting
Make a PHP file to display the submitted data
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.

I hope this tutorial on embed ckeditor in html helps you and the steps and method mentioned above are easy to follow and implement.

About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪