how to make a Rich text Editor using CK Editor

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:

1. index.html
2. main.css

and copy this code to our index.html

    
    
        
        
    
    
  
   

       

CK EDITOR

        This is some sample content.


    

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.