How to integrate a Medium editor in Angular 8

In the world of text editing, there is a new era of WYSIWYG (What You See Is What You Get). We all know how styling and formatting become the important elements of your website but most of the times it is tough to pick a simple, easy-to-use and powerful editor. Currently, the good days are coming back with the new Medium Editor!

Medium Editor is an independent Javascript library to make a coasting content manager bar which springs up when you select a bit of content of your page which is enlivened by the magnificence of Medium.com. You can turn every field from a message on your contact form to a whole article on the back-end into a professionally styled text paragraph contains quote blocks, heading, hyperlinks or just a few selected words.

You can also try to incorporate text editor into Angular 8 for the ease of updates and edits of your content. Angular 8 has released its latest feature - beta 6 with the attractive new functionalities for testing your software and fixing bugs. One of them is Bazel - Google's open-source part of its internal build tool called Blaze which is capable of performing incremental builds and tests. Let us check how you can integrate a Medium editor in the Angular 8 platform.

Also Read: Angular CLI 8.3.0 releases with a new deploy command, faster production builds, and more

Steps to create an editor using Angular 8

Step 1:

First thing first, Create a project in Angular and you can also make use of bootstrap for making it look pretty good by adding CDN links in the index.html



After entering the above-given command line, it will generate an angular starter application after it has completed installing all the dependencies.

Step 2:

Install an npm package by entering the below-given line.



And then, include the CSS and js in angular.json file

Step 3:

Create a component with your chosen name and then create the one with the name create

Step 4:

Click to the newly created component.html and make a div by giving it a template reference of the name



Try the above-given code snippet under a few bootstrap classes just to give a basic stylings

Step 5:

Select your component class and make a variable editor to view the child property as listed below:

Step 6:

Then, we will make use of one lifecycle hook of angular which is ngAfterViewInit.



Paste the above-given scrap and you may get a mistake like media supervisor that isn't characterized all things considered, in this way, we have to declare it on the top like



In the wake of rolling out the above improvements, you can, for the most part, make a little medium-supervisor to utilize it for yourself.

You can pick over to compose anything and simply select the content you have written to see the enchantment.

Step 7:

After this, you may require some more alternatives in your editorial manager toolbar. For doing as such, you have to pass an arrangement object in the MediumEditor Constructor.



By making the selective changes, you will be able to see a load of available options.

Step 8:

So, now you have got an editor, you can easily get the data from it. If someone writes a post then you need to have an HTML write of the same. Once more, you have to partition the screen into two parts wherein one half, there will be a supervisor and the other half will show the see of the post.



[box type="shadow" align="" class="" width=""]In the second half of the screen, you need to assign the value of inner HTML as given above[/box]

Wrap Up

Every system is prone to pros and cons and so does the Angular too. Angular offers a clean code development along with the high-performance framework that manages to route, providing seamless updates using Command Line Interface and retrieving the state of location services. Also, you can debug the templates in Angular 8 and supports multiple applications in one domain.

Contrary to this, Angular might be confusing for the newcomers as there is no accurate manual which includes the proper documentation of the framework. Also, it lacks the developer community and there is limited scope to debug Limited Routing. However, Angular 8 supports multiple applications in one domain and user-friendly for all the versions of the operating system.

So, here we come to the end of the article. We hope you have gained information on how to integrate the latest medium editor to Angular 8. Do give it a try! Till then - keep learning!

Author Bio

Dave Jarvis is working as a Business Development Executive at eTatvaSoft.com, an enterprise-level mobile & web application development company. He aims to sharpen his analytical skills, deepening his data understanding and broaden his business knowledge in these years of his career. Click here to find more information about the company. Follow him on Twitter.

Other interesting news in Web development

Google Chrome 76 now supports native lazy-loading

Laravel 6.0 releases with Laravel vapor compatibility, LazyCollection, improved authorization response and more

#Reactgate forces React leaders to confront the community’s toxic culture head on