How to Deploy CkEditor 5 with Angular8, VueJS and React

How to Deploy CkEditor 5 with Angular8, VueJS and React

In this post, we will learn how you can quickly implement CKEditor with front-end framework.

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.

ng new angularckeditor  
cd angularckeditor  

Install the CKEditor 5 WYSIWYG editor component for Angular

npm install --save @ckeditor/ckeditor5-angular  
  
npm install --save @ckeditor/ckeditor5-build-classic  

Now, add CKEditorModule to your application module imports.

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';  
  
@NgModule( {  
    imports: [  
        CKEditorModule,  
        // ...  
    ],  
    // ...  
} )  

Import the editor build in your Angular component and assign it to a public property so it becomes accessible in the template.

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';  
  
@Component( {  
    // ...  
} )  
export class MyComponent {  
    public Editor = ClassicEditor;  
    // ...  
}  

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

<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.

React

Create a new app by using the following command.

npx create-react-app reactckeditor  
cd  reactckeditor  

Install the CKEditor 5 WYSIWYG editor component for React.

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic 

Use the  component inside your project.

import React, { Component } from 'react';  
import CKEditor from '@ckeditor/ckeditor5-react';  
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';  
  
class App extends Component {  
    render() {  
        return (  
            <div className="App">  
                <h2>Using CKEditor 5 build in React</h2>  
                <CKEditor  
                    editor={ ClassicEditor }  
                    data="<p>Hello, csharp corner!</p><br/><br/> <b>This is demo for ckeditor 5 with React</br>"  
                    onInit={ editor => {  
                        // You can store the "editor" and use when it is needed.  
                        console.log( 'Editor is ready to use!', editor );  
                    } }  
                    onChange={ ( event, editor ) => {  
                        const data = editor.getData();  
                        console.log( { event, editor, data } );  
                    } }  
                    onBlur={ ( event, editor ) => {  
                        console.log( 'Blur.', editor );  
                    } }  
                    onFocus={ ( event, editor ) => {  
                        console.log( 'Focus.', editor );  
                    } }  
                />  
            </div>  
        );  
    }  
}  
  
export default App;  

Run your application and you can see the output like below.

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.

Install the CKEditor 5 WYSIWYG editor component for Vue.js  

Here is index.html

<html>  
    <head><link rel="stylesheet" href="normalize.css">  
        <link rel="stylesheet" href="index.css">  
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
     
         <script src="node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>  
         <script src="node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"></script>  
          
      </head>  
    <body>  
      <div class="center">  
          <img class="hero-logo" src="https://vuejs.org/images/logo.png" alt="vue logo">  
            <h2>VUE JS</h2>  
      </div>  
              <div id="app">  
          <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>  
        </div>  
          
        <script src="index.js"></script>  
    </body>  
</html>  

Here is index.js file

Vue.use( CKEditor );  
var app = new Vue({   
    el: '#app',  
    data: {  
        editor: ClassicEditor,  
        editorData: '<p>Hello, csharp corner!</p><br/><br/> <b>This is demo for ckeditor 5 with Vue Js</br>',  
        editorConfig: {  
            // The configuration of the editor.  
        }  
    }  
});  

Run your application and you can see an output like below.

Hope you guys learned something new. Keep learning! Thanks!

Statistical look over Vue.js, React and Angular

Statistical look over Vue.js, React and Angular

Statistical look over Angular, React and Vue.js, and their movements over the years of their activity

GitHub stars are one of the ways some people decide to trust and use an open-source project, or some people easily compare or judge the project based on the number of stars a repository has. Making decisions based on GitHub stars is not a clever idea, and you should put your requirements, frameworks features and architecture first.

None of these frameworks or libraries are “bad”, and we should be always aware that many experts put countless hours of their time to develop these projects. So, If you’re fanatic of a specific framework, let your guard down for some minutes, just relax and continue in peace.

We all are working towards the same goal, all these framework authors are trying to provide you with something that helps you to build web apps as efficiently as possible — Evan You (creator of Vue.js)

What is this post about precisely?

This post is not a comparison between these three web frameworks, because most of the time comparisons happen by people who want to advertise their preferred frameworks, or by people who do not really have the knowledge of creating a framework, so they can’t see different aspects of those frameworks.

This post is simply a statistical look over Angular, React and Vue, and their movements over the years of their activity. Here is what we’re going to learn:

  1. Angular, React and Vue’s GitHub repositories over time
  2. Stackoverflow question/answers
  3. Job Statistics
  4. Conclusion

So, let’s get started

Angular, React and Vue’s GitHub repositories over time

291,934 unique GitHub users starred at least one of Angular, React, Vue and Angular.js repositories, and it took me around two weeks to crawl all of these user pages for statistical and demographical purposes. So, what can we learn from these collected data?

What are these repositories averages?

The table below shows the average of some GitHub main metrics. As you can see, there is a short gap between each of these average. I’m just trying to provide information and I’ll not interpret anything.

![](https://www.freecodecamp.org/news/content/images/2019/11/1_XDhqtYPoKnYJKL5NikO2HQ-1-.jpeg)

In order to better understand the growth rates of these repositories over the last few years, I have prepared their star count over time in the following chart.

Common starers

The diagram and table below show the number of users who starred more than one repositories, and as you can see React and Vue has more starers in common, and Angular has almost the same number of common user between React and Vue.

Git commits per time

The number of commits is a good way to know how actively the project is being developed.

The underneath bar chart race shows the number of commits over time. Unlike Vue, The Angular and React contributors commit a lot to their repositories.

Number of commits per time

Here is another chart of the same data:

Number of contributors

The number of contributors is one of the things that makes a repository stronger because there are more people who know how to develop and improve the framework or library, and they can simply push the project forward, and that means there is a greater opportunity to discover and fix more bugs and issues and enhance them quicker. In fact, it’s also good for the community because more participants can address specific questions from programmers, and it can also be a sign of the main contributors‘ openness.

Stackoverflow question/answers

There is no doubt that in the past few years Stackoverflow was one of the several important and powerful platforms that developers use to learn and solve their coding problems. The number of questions asked on Stackoverflow represents the number of people who are using or learning a particular technology. I used StackExchange data explorer and wrote an SQL query to fetch each tag’s count grouped by year and month. The following charts show the number of asked questions by each tag over time.

Job Statistics

The job market shows what technologies are companies using. Software engineers and engineering managers usually compare frameworks or libraries in order to choose which suits their needs. Also, one thing they mind about is how easy it is to find a developer who is skilled in that particular platform. Therefore, the more popular the framework or library, the more potential it has to be selected.

Conclusion

This was a short article just to look over these good and popular web frameworks from different angles.

Unfortunately, there are software engineers who compare frameworks or libraries only by their GitHub stars and not by their architecture and features. Even though I believe almost none of these statistical numbers are valuable when it goes to a real-life project.

The only wish I have is to be even a little effective to end the war between frameworks and to convince people who fight over their favorite tools, and just tell them “other frameworks are not poor or bad at all. They all are doing very well”.

Learning is wonderful and enjoyable, just pick a new framework and try to use it in your side project, or just use your favorite framework, and don’t let those numbers disappoint you.

React vs Angular vs Vue.js by Example

What is the best JavaScript framework, library that everybody is learning in 2019? React, Angular or Vue? Watch this video to find out.

With all of the various javascript *libraries *and frameworks, you might be a little bit confused as to where to begin. Right now, the three powerhouses in the javascript world are React, Angular and Vue.js.

Sometimes, the best course of action is to make up your own mind based on your own experiences.

And that's exactly what this course will aim to do. We're going to design and develop a single app in React, Angular and Vue.js.

The goal here is to help you determine which workflow you like best based on your own needs and preferences.

The following is the basic flow of what we're going to learn in React, Angular, and Vue.js:

  • Installing & Getting Started with a Project
  • Component Structure
  • Templating
  • Styling
  • Integrating CSS Frameworks
  • Working with API's

This will help you get a solid start with each of these javascript technologies, to the point at which you will walk away with your own opinions.

So, if you're ready to learn, let's get started!

What you’ll learn

  • Create a React App
  • Create an Angular App
  • Create a Vue.js App
  • Create an Adobe XD Prototype Mockup
  • Understand the core differences between React, Angular and Vue.js

Are there any course requirements or prerequisites?

  • HTML
  • CSS
  • Basic Javascript
  • Adobe XD (Experience Design) for Mockup Process (Optional)

Thanks for watching

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Collection of 15 Vue Editor Component for Your Vue App

Collection of 15 Vue Editor Component for Your Vue App

Vue editor component can become an unparalleled ally when it comes to code completion and visual assistance for debugging and building a Vue app.

Vue editor component can become an unparalleled ally when it comes to code completion and visual assistance for debugging and building a Vue app.

1. Vue2Editor

HTML Editor using Vue.js and Quilljs.

Demo

Download


2. Vuep (vue playground)

A component for rendering Vue components with live editor and preview.

Demo

Download


3. Vue-Trumbowyg

Vue.js v2.x component for Trumbowyg WYSIWYG editor

Features

  • Reactive v-model value
  • You can change editor value programmatically
  • Play nice with vee-validate validation library

Demo

Download


4. vue2-medium-editor

A medium-editor component for Vue2. For Vue1 checkout branch 1.0.

Demo

Download


5. typeflow-editor

build with the vue and mxGraph.

Demo

Download


6. tiptap-vuetify

WYSIWYG editor for Vuetify. Component simplifies integration tiptap with vuetify.

Features

  • used vuetify components
  • support for different types of icons (fa, md, mdi)
  • internationalization (en, fr, pl, es, ru, uk, ptbr), with automatic detection of the current language through the Vuetify
  • easy to start using
  • props and events are available
  • TypeScript support
  • the project is ready to actively develop if there is support (stars)!
  • the ability to create and use your own extensions
  • choose where the extension buttons should be displayed: in the toolbar or in the bubble menu
  • Vuetify 2.x and 1.x support

Demo

Download


7. Kirby Editor β

Kirby Editor is a new type of WYSIWYG editor for Kirby. It's a mixture between a regular WYSIWYG and a block editor to bring together the best parts of both worlds in a user-friendly interface.

Download


8. Vue Trix Rich Text Editor

A Vue wrapper around the Trix rich-text editor, with support for images and auto-save.

Download


9. vue-mathlive

The MathLive Vue wrapper provides a Vue component that implements a <mathfield> HTML tag.

The component can be used to edit formulas using the MathLive library. The editor provides a rich, accessible, editing UI, including virtual keyboards for mobile, and can provide the output as LaTeX, MathML or spoken text.

Download


10. yimo-vue-editor

Vue-editor component modified and encapsulated based on wangeditor2.5.11 source code.

Demo

Download


11. vue-katex

KaTeX enables fast math typesetting for the web. This plugin introduces a simple directive to use KaTeX in your Vue app. Enjoy!

Demo

Download


12. toast-ui.vue-editor

This is Vue component wrapping TOAST UI Editor.

Demo

Download


13. ckeditor5-vue

CKEditor 5 rich text editor component for Vue.js.

Demo

Download


14. tiptap

A renderless and extendable rich-text editor for Vue.js

Demo

Download


15. json-editor

Edit JSON in UI form with JSON Schema and Vue.js json-editor component.

Demo

Download


Thank for read!