Post
Ask Question

Implement CkEditor 5 With Angular, React, And VueJS

In my previous articles, I briefly explained about front-end frameworks and cross-platform applications with .NET Core 3. Now, I have decided to work on the most popular CKEditor with Angular, React, and VueJS.
 

What is an editor?

 
Editor is a term used to describe any amend or edit done to a virtual (online) document. For example, description, blog, article, and wiki content without copying or moving it offline to do the edit.
 

Why CKEditor? 

  • Written in ES6 with MVC architecture, custom data model, virtual DOM.
  • Easy embedding of responsive images and media (videos, tweets).
  • Custom output format: HTML and Markdown support.
  • Boosts productivity with auto-formatting and collaboration.
  • Extensible and customizable by design.
If you are a newbie for Angular, React, And VueJS, then you can find abstract explanation from the below links including installation and much more.
Now, we will learn how you can quickly implement CKEditor with that front-end framework.
 

Angular 

 
Create a new app by using the following command.
  1. ng new angularckeditor  
  2. cd angularckeditor  
  1. npm install --save @ckeditor/ckeditor5-angular  
  2.   
  3. npm install --save @ckeditor/ckeditor5-build-classic  

Now, add CKEditorModule to your application module imports.

  1. import { CKEditorModule } from '@ckeditor/ckeditor5-angular';  
  2.   
  3. @NgModule( {  
  4.     imports: [  
  5.         CKEditorModule,  
  6.         // ...  
  7.     ],  
  8.     // ...  
  9. } )  
Import the editor build in your Angular component and assign it to a public property so it becomes accessible in the template.
  1. import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';  
  2.   
  3. @Component( {  
  4.     // ...  
  5. } )  
  6. export class MyComponent {  
  7.     public Editor = ClassicEditor;  
  8.     // ...  
  9. }  

Finally, use the <ckeditor> tag in the template to run the rich text editor

  1. <ckeditor [editor]="Editor" data="<p>Hello, csharp corner!</p><br/><br/> <b>This is demo for ckeditor 5 with angular 8</br>"></ckeditor>   
Run your application and you can see output like below.
 
Implement CkEditor 5 With Angular, React And Vue JS
 

React

 
Create a new app by using the following command.
  1. npx create-react-app reactckeditor  
  2. cd  reactckeditor  
  1. npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic  

Use the <ckeditor> component inside your project.

  1. import React, { Component } from 'react';  
  2. import CKEditor from '@ckeditor/ckeditor5-react';  
  3. import ClassicEditor from '@ckeditor/ckeditor5-build-classic';  
  4.   
  5. class App extends Component {  
  6.     render() {  
  7.         return (  
  8.             <div className="App">  
  9.                 <h2>Using CKEditor 5 build in React</h2>  
  10.                 <CKEditor  
  11.                     editor={ ClassicEditor }  
  12.                     data="<p>Hello, csharp corner!</p><br/><br/> <b>This is demo for ckeditor 5 with React</br>"  
  13.                     onInit={ editor => {  
  14.                         // You can store the "editor" and use when it is needed.  
  15.                         console.log( 'Editor is ready to use!', editor );  
  16.                     } }  
  17.                     onChange={ ( event, editor ) => {  
  18.                         const data = editor.getData();  
  19.                         console.log( { event, editor, data } );  
  20.                     } }  
  21.                     onBlur={ ( event, editor ) => {  
  22.                         console.log( 'Blur.', editor );  
  23.                     } }  
  24.                     onFocus={ ( event, editor ) => {  
  25.                         console.log( 'Focus.', editor );  
  26.                     } }  
  27.                 />  
  28.             </div>  
  29.         );  
  30.     }  
  31. }  
  32.   
  33. export default App;  
Run your application and you can see the output like below.
 
Implement CkEditor 5 With Angular, React And Vue JS
 

Vue JS

 
Make two files - one is index.html and another one is index.js. In the root folder of those files, you have to add the following package using cmd.
  1. Install the CKEditor 5 WYSIWYG editor component for Vue.js  
Here is index.html
  1. <html>  
  2.     <head><link rel="stylesheet" href="normalize.css">  
  3.         <link rel="stylesheet" href="index.css">  
  4.          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  5.      
  6.          <script src="node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>  
  7.          <script src="node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"></script>  
  8.           
  9.       </head>  
  10.     <body>  
  11.       <div class="center">  
  12.           <img class="hero-logo" src="https://vuejs.org/images/logo.png" alt="vue logo">  
  13.             <h2>VUE JS</h2>  
  14.       </div>  
  15.               <div id="app">  
  16.           <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>  
  17.         </div>  
  18.           
  19.         <script src="index.js"></script>  
  20.     </body>  
  21. </html>  
Here is index.js file 
  1. Vue.use( CKEditor );  
  2. var app = new Vue({   
  3.     el: '#app',  
  4.     data: {  
  5.         editor: ClassicEditor,  
  6.         editorData: '<p>Hello, csharp corner!</p><br/><br/> <b>This is demo for ckeditor 5 with Vue Js</br>',  
  7.         editorConfig: {  
  8.             // The configuration of the editor.  
  9.         }  
  10.     }  
  11. });  
Run your application and you can see an output like below.
 
Implement CkEditor 5 With Angular, React And Vue JS 
Hope you guys learned something new. Keep learning!
 
 
Here are the links to my previous articles. 


Similar Articles