Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7 Tinymce working example.
Friends, here is tinymce update version for angular 10 and angular 11:
Angular 10 Tinymce
Angular 7 is getting popularity these days. If you are new in Angular then you can check my old posts related to Angular.
Also guy’s, here you can check my Angular 11 posts: Angular 11 Tutorial
Today I will implement TinyMCE – JavaScript Library for Rich Text Editing in Angular 7.2.4 latest version.
Here is the working code snippet and you need to follow carefully:
1. Here are some basics commands to add new Angular setup and other libraries:
ng new angulartinymc cd angulartinymc npm i tinymce
2. Here is code, you need to add your angular.json file:
...
"styles": [
"node_modules/tinymce/skins/ui/oxide/skin.min.css",
"node_modules/tinymce/skins/ui/oxide/content.min.css",
"node_modules/tinymce/skins/content/default/content.min.css",
"src/styles.css",
],
"scripts": [
"node_modules/tinymce/tinymce.min.js",
"node_modules/tinymce/themes/silver/theme.js"
]
...
3. Here is the code, you need to add app.component.ts file:
import { Component, OnInit } from '@angular/core';
declare var tinymce: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angulartinymc';
ngOnInit() {
tinymce.init(
{
selector: "#mymce1"
});
}
}
4. Here is the code, you need to add app.component.html file:
<textarea id="mymce1"></textarea>
In the end run ng serve command and check the output. If you have any query related to this post, then please do comment below.
Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.
Harjas,
Thank you.
Leave a Reply