How To Setup Ckeditor 5 On Your Website
If you want users to write formatted content on your website, a rich text editor is very important. One of the best tools for this is CKEditor 5, a modern JavaScript editor that allows users to create and edit content easily without writing HTML.
In this guide, you will learn how to set up CKEditor 5 on your website step by step using simple HTML and JavaScript.
What is CKEditor 5?
CKEditor 5 is a powerful WYSIWYG (What You See Is What You Get) editor that lets users format text directly in the browser.
With CKEditor you can:
- Format text like bold, italic, and headings
- Insert links
- Create lists
- Edit content visually
- Build blog or CMS editors
It is commonly used in blogs, admin dashboards, and content management systems.
Step 1: Create a Basic HTML Page
First, create a simple HTML structure for your page.
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Ckeditor5</title>
<style>
.container {
width: 80%;
max-width: 800px;
margin: 0 auto;
}
</style>
</head>Step 2: Add the Editor Element
Next, create a div where the editor will appear.
<body>
<div class=”container”>
<div id=”editor”>
This is the inline text
</div>
</div>
<a href=”home.html” target=”_blank”>Home</a>The #editor element will be converted into a rich text editor.
Step 3: Add CKEditor Script
Now include the CKEditor JavaScript file.
<script src=”ckeditor/ckeditor.js”></script>Make sure the CKEditor file is inside the ckeditor folder in your project.
Step 4: Initialize CKEditor
Finally, activate the editor using JavaScript.
<script>
ClassicEditor
.create(document.querySelector(‘#editor’))
.catch(error => {
console.error(error);
});
</script>This script tells the browser to transform the #editor div into a fully functional editor.
Full Working Example
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Ckeditor5</title>
<style>
.container {
width: 80%;
max-width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class=”container”>
<div id=”editor”>
This is the inline text
</div>
</div>
<a href=”home.html” target=”_blank”>Home</a>
<script src=”ckeditor/ckeditor.js”></script>
<script>
ClassicEditor
.create(document.querySelector(‘#editor’))
.catch(error => {
console.error(error);
});
</script>
</body>
</html>Github Repo: Source Code
Conclusion
Setting up CKEditor 5 on your website is very easy. With just a few lines of HTML and JavaScript, you can add a powerful content editor for blogs, CMS platforms, or admin dashboards.
Once installed, you can extend CKEditor with additional plugins like image uploads, tables, media embedding, and custom toolbars.
account_box Author: Osto Code
date_range Date: 16th, March 2026
access_time Time: 10:48 pm
remove_red_eye Views: 40 Views