Categories

Thursday, March 28, 2024
#919814419350 therichposts@gmail.com
Angular 9Bootstrap 4tinymce

Angular 9 Tinymce in Bootstrap Modal Popup working example

Angular 9 Tinymce in Bootstrap Modal Popup working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Tinymce in Bootstrap Modal Popup working example.

Angular 9 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 9 latest version.


Angular 9 Tinymce in Bootstrap Modal Popup working example
Angular 9 Tinymce in Bootstrap Modal Popup working example

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

npm install --save bootstrap

 

2. Here is code, you need to add your angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/tinymce/skins/ui/oxide/skin.min.css",
              "node_modules/tinymce/skins/ui/oxide/content.min.css",
        "node_modules/bootstrap/dist/css/bootstrap.min.css"

            ],
"scripts": [
              "node_modules/tinymce/tinymce.min.js",
              "node_modules/tinymce/themes/silver/theme.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.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 {
 
  showModal: boolean;
  show()
  {
    this.showModal = true; // Show-Hide Modal Check
    
  }
  //Bootstrap Modal Close event
  hide()
  {
    this.showModal = false;
  }
  ngOnInit() {
    
      tinymce.init(
        {
            selector: "#mymce1"
        });
  }
}

 

4. Here is the code, you need to add app.component.html file:

<div class="container">

<button type="button" class="btn btn-primary" (click) = "show()">Open Pop Up with Tinymce</button>
   
<!-- Creates the bootstrap modal where the image will appear -->
<div [style.display]="showModal ? 'block' : 'none'" class="modal" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel">Login</h4>
    </div>
    <div class="modal-body">
        <textarea id="mymce1"></textarea>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-dark" data-dismiss="modal" (click) = "hide()">Close</button>
    
    </div>
  </div>
</div>
</div>
</div>

 

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.

Jassa,

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 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

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