Therichpost

Categories

Thursday, December 26, 2024
#919814419350 therichposts@gmail.com
Therichpost
Therichpost

The best tech and code magazine.

Angular 7.2.4Angular7Javascript

Angular 7 Tinymce working example

therichpostMarch 22, 2019
posted on

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.

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.
All posts bytherichpost

64 Comments

    • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • Hi Ajay,

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

    Reply

  • Hi Ajay,

    How can we Enable audio video upload attachment in tinymce

    Looking forward to your reply..

    Reply

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

    Reply

  • 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

  • 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

  • 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

  • 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

Leave a Reply

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

You Might Also Like