When you want to create a blog or any other website you will certainly need to create a CMS to manage your content, and every CMS has it's own Rich text editor that allows him to add beautiful content. Of course, you will not create a full rich text editor from scratch, because it's so complicated and consume a great amount of time. In this tutorial, we will see together how to integrate one of the best Rich text editors in the world and it's CK Editor, so let's start it.
Installation:
first, we will need to download the files of CK editor, for that we will need to go to Ckeditor.com and download ckeditor5
go to the main menu and select CKeditor 5, after that a new window will show up, and click on download.
after clicking on the download menu, choose the version of the CKeditor that you want and for the moment choose CKeditor 5 Classic.
N.B: it's important to choose the build because every version is made in many différent ways and that's is what we are gonna see in a while.
now choose the download option that you want, CKEditor offers you 3 different download method, you can choose the best option for you ( for example if you are planning to make a desktop application i recommend you to use the command option or download the zip file )
for this tutorial, we will just copy the cdn and paste it on our file.
Coding
now all that we have to do is to create two files:
- index.html
- main.css
and copy this code to our index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
</head>
<body>
<div class="container">
<h1>CK EDITOR</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
and copy this code in your CSS file
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
background-color: #1976d2;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
background-color: #fafafa;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
padding: 15px;
}
h1{
text-align: center;
margin-bottom: 25px;
font-family: 'Roboto',sans-serif;
}
p{
font-family: 'Open-Sans',sans-serif;
}
.container #editor{
height: 500px;
}
and this is our final result how it will looks
I hope that you have liked this tutorial if you want more tutorials about API just tell us in the comment.
how to make a Rich text Editor using CK Editor
Reviewed by Medics
on
August 31, 2019
Rating:
Reviewed by Medics
on
August 31, 2019
Rating:
Please make tutorial on image upload in ck editor 5. I had tried a lot but failed due to this i am using ck editor 4.
ReplyDelete