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.
TOoooooooooooooooooooooooooooooo
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’
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!
Hi Bhanu, first off all, angular is use for single page application and you are using word redirecting means?
Hi Ajay, redirecting means here navigating. Using router.navigate i am navigating to some other page and on that page tinymce editor is used.
I think, you have to add tinymce editor in all the component, did you?
i did
Any error, are you getting in console?
no
Can you please send me you code via email?
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
Juast add tinymce.remove() before tinymce.init
or
ngOnDestroy(){
tinymce.remove()
}
ngOnDestroy(){
tinymce.remove()
}
Thanks for the reply
You are most welcome 🙂
Can you please send me you code via email?
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.
Okay, you want to print error below the field?
Yes, In my application i am using “toastr notification” for messaging but when i am using in place of alert then it gives error
Can you please tell me that error?
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
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)
}
}
}
Hi Ajay,
Do you have any idea about writing unit test cases for TinyMCE (jasmine)? Looking forward to your reply!
HI, you want TinyMCE (jasmine) in angular?
how to set TinyMCE in boostrap model.
Will show you working example.
Hi Ajay,
How can we Enable audio video upload attachment in tinymce
Looking forward to your reply..
You can do that with setting attribute.
Hi I am getting this error:
ERROR ReferenceError: tinymce is not defined
I updated angular.json file
Now I am update it to Angular 9/10
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.
Hi I am going to share updated post very soon. Thanks
Please check:
https://therichpost.com/angular-10-tinymce-working-example/
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.
Can you please show me your code?
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
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
You need to add this into your angular.json file.
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.
Then I will tell you other way but best way is in angular.json fileThanks
i need image upload from my local folder
I am going share updated post for this.
Hi Sir can image upload is not working in my agular 8 tinymce configartion can you share the configartion for it.
Means image upload menu is not showing?
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
I think, we have update to angular version and I will update you.
my angular is 7
Do I still need to update?
yeah may be because angular 10 came.
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/ **
I will update you on this.
Hi I am trying print getcontent in Use innerHTML but it shows without inline styles
I will update you on this. Thanks
Tinymce Angular 10:
https://therichpost.com/angular-10-tinymce-working-example/
i want to use @tinymce/tinymce-angular with angular 7.2.0
which version should i install?
You can install any version.
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.
Hi Ajay,
Please input value binding the tinymceeditor
Will share the post link soon and you can find in my blog search.
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
Yes we can use multiple editor in single page with different ID’s.
Hi sir i couldnt load link in tinymce editor…I ant to load a pdf document in the editor while page is open
Okay. You want to load PDF file inside editor?
yes
Okay I will make post and let you know.
Thanks