Home Angular 7.2.4 Angular 7 Tinymce working example

Angular 7 Tinymce working example

by therichpost
Published: Updated: 64 comments
angular7

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.


Angular 7 Tinymce working example
Angular 7 Tinymce working example

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.

You may also like

64 comments

hgffffffffffffffffff May 24, 2019 - 11:43 am

TOoooooooooooooooooooooooooooooo

Reply
Dags August 13, 2020 - 2:26 pm

Hello sir ,
I’m having this can you help , where do i find this library I install the lastpart, npm i tinymce

Failed to compile.

multi ./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
Module not found: Error: Can’t resolve ‘C:\Users\Covid19 Pro\angulartinymc\src\styles.css’ in ‘C:\Users\Covid19 Pro\angulartinymc’

Reply
Bhanu Priya July 20, 2019 - 8:41 am

Hi Ajay,
Thanks for your help,but my problem is that after redirecting to the page, the tinymce editor becomes normal input text. And i want to disabled editor then it does not happen.

Waiting for your reply!

Reply
Ajay Malhotra July 20, 2019 - 8:50 am

Hi Bhanu, first off all, angular is use for single page application and you are using word redirecting means?

Reply
Bhanu Priya July 22, 2019 - 9:23 am

Hi Ajay, redirecting means here navigating. Using router.navigate i am navigating to some other page and on that page tinymce editor is used.

Reply
Ajay Malhotra July 22, 2019 - 9:25 am

I think, you have to add tinymce editor in all the component, did you?

Reply
Bhanu Priya July 23, 2019 - 7:12 am

i did

Reply
Ajay Malhotra July 23, 2019 - 7:40 am

Any error, are you getting in console?

Reply
Bhanu Priya July 23, 2019 - 12:19 pm

no

Ajay M July 23, 2019 - 12:21 pm

Can you please send me you code via email?

Bhanu Priya July 23, 2019 - 12:45 pm

problem when integrating tinyMce with angular, it works fine the first time, but the second time I want to edit again with the TinyMce it becomes a textArea.When using it once everything works well
but when using the editor again without reloading the page, it becomes a and it does not return any error in consola

Bhanu Priya August 6, 2019 - 5:12 am

Juast add tinymce.remove() before tinymce.init
or
ngOnDestroy(){
tinymce.remove()
}

Ajay Malhotra August 6, 2019 - 5:16 am

ngOnDestroy(){
tinymce.remove()
}

Bhanu Priya July 22, 2019 - 9:24 am

Thanks for the reply

Reply
Ajay Malhotra July 22, 2019 - 9:26 am

You are most welcome 🙂

Reply
Ajay M July 23, 2019 - 12:20 pm

Can you please send me you code via email?

Reply
Bhanu Priya August 30, 2019 - 11:16 am

tinymce.init(
{
selector: “#mytextarea”,
menubar : false,
statusbar:false,
mode: “textareas”,
editor_selector: “mceEditor”,
readonly:false,
convert_urls: false,
relative_urls: false,
init_instance_callback: function (editor) {
editor.on(‘keyPress’, function (e) {
console.log(e);
if ((e.keyCode == 32 || e.charCode == 32) && e.key == ” “) {
console.log(‘Space not allowed at first place’);
alert(‘Space not allowed at first place’);
return false;
}
return true;
});
},

Hi, In this code i am unable to print error message. I don’t want to use alert.

Reply
Ajay Malhotra August 30, 2019 - 11:21 am

Okay, you want to print error below the field?

Reply
Bhanu Priya August 31, 2019 - 7:17 am

Yes, In my application i am using “toastr notification” for messaging but when i am using in place of alert then it gives error

Reply
Ajay August 31, 2019 - 7:20 am

Can you please tell me that error?

Reply
Yana October 30, 2019 - 8:15 am

Hi, I have a problem with Tiny MCE. If I unsert all settings to app.component it`s work, but if I create custome component (exp: editor component) tiny dont see config that I whrite in .ts

Reply
kanishk shrivastava November 9, 2019 - 8:02 pm

import { Component, OnInit } from ‘@angular/core’;
import { FormBuilder, FormControl, FormGroup } from ‘@angular/forms’;

@Component({
selector: ‘my-app’,
templateUrl: ‘./app.component.html’,
styleUrls: [ ‘./app.component.css’ ]
})

export class AppComponent {

editorForm:FormGroup;
tinymceInit:any={};

constructor(private fb:FormBuilder){

this.tinymceInit = {
content_css: ‘assets/skins/ui/oxide/content.min.css’,

base_url: ‘/tinymce’,
plugins: [
‘advlist autolink lists link image charmap print preview hr anchor pagebreak’,
‘searchreplace wordcount visualblocks visualchars code fullscreen’,
‘insertdatetime media nonbreaking save table contextmenu directionality’,
’emoticons template paste textcolor colorpicker textpattern code’
],
toolbar1:
‘insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image’,
toolbar2: ‘print preview media | forecolor backcolor emoticons’,
image_advtab: true,
paste_data_images: true,
automatic_uploads: true,
file_picker_types: ‘image’,
file_picker_callback(cb, value, meta) {
if (meta.filetype == ‘image’) {
const input: any = document.createElement(‘input’);
input.setAttribute(‘type’, ‘file’);
input.setAttribute(‘accept’, ‘image/*’);
input.click();
input.onchange = function() {
const file = input.files[0];
const reader = new FileReader();
reader.onload = function(e: any) {
cb(e.target.result, {
alt: file.name
});
};
reader.readAsDataURL(file);
};
input.remove();
}
}
};
}
ngOnInit(){
this.editorForm= this.fb.group({
‘tinyMice’: ”
})
}

name = ‘Angular’;

imageFilePicker(callback, value, meta){
if (meta.filetype == ‘image’) {
console.log(value, meta)
}
}
}

Reply
Reshma Ramesh December 5, 2019 - 10:48 am

Hi Ajay,

Do you have any idea about writing unit test cases for TinyMCE (jasmine)? Looking forward to your reply!

Reply
Ajay Malhotra December 5, 2019 - 3:51 pm

HI, you want TinyMCE (jasmine) in angular?

Reply
manish February 6, 2020 - 10:05 am

how to set TinyMCE in boostrap model.

Reply
Ajay Malhotra February 6, 2020 - 5:32 pm

Will show you working example.

Reply
Prasad June 12, 2020 - 5:41 am

Hi Ajay,

How can we Enable audio video upload attachment in tinymce

Looking forward to your reply..

Reply
Ajay Malhotra June 12, 2020 - 7:11 am

You can do that with setting attribute.

Reply
Himanshu June 29, 2020 - 12:11 pm

Hi I am getting this error:

ERROR ReferenceError: tinymce is not defined

I updated angular.json file

Reply
Ajay Malhotra June 29, 2020 - 3:28 pm

Now I am update it to Angular 9/10

Reply
Ajay September 4, 2020 - 9:05 am

Hi Ajay,

I am also facing the same issue in Angular 7 .

ERROR ReferenceError: tinymce is not defined
I have implemented in the same way.

Any help appreciated.
thanks in advance.

Reply
Ajay Malhotra September 4, 2020 - 9:12 am

Hi I am going to share updated post very soon. Thanks

Reply
Ajay September 7, 2020 - 2:41 pm

Hi Ajay,

I am using tinymce cloud implementation and it is working with tag if I bind it in editor property directly.
But when I tried to bind my another textarea control from tinymce.component.ts file using tinymce.init() method then It gives error tinymce is not defined.

Reply
Ajay Malhotra September 7, 2020 - 4:04 pm

Can you please show me your code?

Reply
Ajay September 8, 2020 - 8:09 am

Hi Ajay,

Thanks for reply.

I am loading the script and css file using cloud as given below in index.html page head section.

MYAPIKey is my APIKey that I Cant mention here.

Other code in TS file is same as you mention above.
Thanks

Ajay September 8, 2020 - 8:11 am

link rel=”stylesheet” type=”text/css” id=”u0″ referrerpolicy=”origin” href=”https://cdn.tiny.cloud/1/MYAPIKey/tinymce/5.4.2-90/skins/ui/oxide/skin.min.css”

script referrerpolicy=”origin” type=”application/javascript” id=”tiny-script_99509534011599551993104″ src=”https://cdn.tiny.cloud/1/MYAPIKey/tinymce/5/tinymce.min.js” /script

Ajay Malhotra September 8, 2020 - 8:46 am

You need to add this into your angular.json file.

Ajay September 8, 2020 - 9:56 am

Thanks for reply,
We add this css and js in angular.json file in case if TinyMCE Self-hosted not in case of TinyMCE cloud. And we have cloud implementation.

Ajay Malhotra September 8, 2020 - 9:58 am

Then I will tell you other way but best way is in angular.json fileThanks

soundar July 1, 2020 - 4:25 am

i need image upload from my local folder

Reply
Ajay Malhotra July 1, 2020 - 4:59 am

I am going share updated post for this.

Reply
sandeep July 15, 2020 - 5:04 am

Hi Sir can image upload is not working in my agular 8 tinymce configartion can you share the configartion for it.

Reply
Ajay Malhotra July 15, 2020 - 5:06 am

Means image upload menu is not showing?

Reply
angular7 July 27, 2020 - 8:08 am

hi please help me to one error on compile project
this error :ERROR in node_modules/@tinymce/tinymce-angular/editor/editor.component.d.ts(8,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/@tinymce/tinymce-angular/editor/editor.component.d.ts(9,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/@tinymce/tinymce-angular/editor/editor.component.d.ts(10,9): error TS1086: An accessor cannot be declared in an ambient context.

*** and failed compile please help me for this error

Reply
Ajay Malhotra July 27, 2020 - 8:49 am

I think, we have update to angular version and I will update you.

Reply
angular7 July 27, 2020 - 9:09 am

my angular is 7
Do I still need to update?

Reply
Ajay Malhotra July 27, 2020 - 9:25 am

yeah may be because angular 10 came.

Reply
Dags August 13, 2020 - 2:56 pm

Hi Sir Im having this problem, if I run it ng serve –port 4200
but I can see the file on node_module , I don’t now what is the proble my angular.json looks like these .

],
“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”
]
},

the output is this
ERROR in multi ./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
Module not found: Error: Can’t resolve ‘C:\Users\Covid19 Pro\angulartinymc\src\styles.css’ in ‘C:\Users\Covid19 Pro\angulartinymc’
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Reply
Ajay Malhotra August 13, 2020 - 3:59 pm

I will update you on this.

Reply
shankar.buddha August 31, 2020 - 12:49 pm

Hi I am trying print getcontent in Use innerHTML but it shows without inline styles

Reply
Ajay Malhotra August 31, 2020 - 4:14 pm

I will update you on this. Thanks

Reply
Ajay Malhotra September 4, 2020 - 5:05 pm Reply
chaya October 15, 2020 - 12:21 pm

i want to use @tinymce/tinymce-angular with angular 7.2.0
which version should i install?

Reply
Ajay Malhotra October 15, 2020 - 1:37 pm

You can install any version.

Reply
Srikanth February 18, 2021 - 4:16 pm

Hi , i am trying to integrate tinymce with angualr7. when I try to implement tinymce for one of my custom component (not app.component), its shoiwing default textarea but not tinymce editor.I tried all possible ways. Where do we need to put tinymce.init code, I tried putting it in app.compnent and custom component where I need editor? Please help me to fix this issue.

Reply
sai April 9, 2021 - 7:56 am

Hi Ajay,

Please input value binding the tinymceeditor

Reply
Ajay Malhotra April 9, 2021 - 9:15 am

Will share the post link soon and you can find in my blog search.

Reply
Chethan L M April 28, 2021 - 6:11 am

how can i use, multiple editors in a single page
always its taking recent one in the html , if i change the selector as a different names for the editors

Reply
Ajay Malhotra April 28, 2021 - 6:13 am

Yes we can use multiple editor in single page with different ID’s.

Reply
Anu November 8, 2021 - 5:01 am

Hi sir i couldnt load link in tinymce editor…I ant to load a pdf document in the editor while page is open

Reply
Ajay Malhotra November 8, 2021 - 5:05 am

Okay. You want to load PDF file inside editor?

Reply
Anu November 8, 2021 - 5:07 am

yes

Reply
Ajay Malhotra November 8, 2021 - 6:06 am

Okay I will make post and let you know.
Thanks

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.