In this article, we will learn the correct way to add ckeditor5 to our website.
CKEditor5 has many advantages
- Auto-formatting
- Paste from Word
- Embed media
- Responsive images
how to use CKEditor
it`s easy to use CKEditor5 just 3 steps
first open CKEditor5 download page ,then you can see a five styles to choose from
- Classic
- Balloon
- balloon-block
- inline
- document
if you select first style CKEditor 5 Classic you can see the CDN javasecript link
copy it and past befor </head> tag
<html>
<head>
<title>Hello ckeditor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
</head>then add the selector to the text area element id="editor"
<html>
<head>
<title>Hello ckeditor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="content" id="editor"></textarea>
</form>The last Steps is to create instance , before the end of the </body> tag add this script
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>ckeditor full demo
this code will show you the full code of CKEditor-5 and how to use it
<html>
<head>
<title>Hello ckeditor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="content" id="editor"></textarea>
</form>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
