Angular 7.2.4Angular7Javascript

Angular 7 Tinymce working example

Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7 Tinymce working example.

Angular 7 is getting popularity these days. If you are new in Angular then you can check my old posts related to Angular.

Today I will implement TinyMCE – JavaScript Library for Rich Text Editing in Angular 7.2.4 latest version.



Here is the working code snippet, 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.

Harjas,

Thank you.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

21 Comments

  • 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 Ajay, redirecting means here navigating. Using router.navigate i am navigating to some other page and on that page tinymce editor is used.

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

  • 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)
    }
    }
    }

Leave a Reply

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

Positive SSL