How To Setup Ckeditor 5 On Your Website


 • March 16, 2026 • remove_red_eye 189 Views
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.

Advertisement

share