Insert text at cursor using tinyMCE and Angular

0
votes

Using tinyMCE with Angular I need to insert text at the cursor position, preferably with a toolbar button.

As I understand, I'll need to use the onExecCommand event with mceInsertContent command.

I've looked at the following:

But the solutions don't help in this case.

Here's the documentation

editor-dialog.component.html

<editor [init]="tinyMceConfig"
  [formControl]="data.formControl">
</editor>

editor-dialog.component.ts

/* ... */

export class EditorDialogComponent implements OnInit {
  tinyMceConfig: any;

  constructor(
    /* ... */
  ) { }

  ngOnInit() {
    this.configureTinyMce();
  }

  configureTinyMce() {
    this.tinyMceConfig = {
      theme: 'modern',
      menubar: false,
      branding: false,
      height: 400,
      skin_url: 'assets/tinymce/skins/lightgray',
      inline: false,
      plugins: [
        'advlist lists link image directionality',
        'searchreplace visualblocks visualchars media table contextmenu paste textcolor colorpicker pagebreak code'
      ],
      // tslint:disable-next-line:max-line-length
      toolbar: 'copy undo redo formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat hr pagebreak code',
      image_advtab: true,
      imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
      paste_data_images: !0,
      importcss_append: !0,
      images_upload_handler: function (e, t, a) {
        console.log('image');
        t('data:' + e.blob().type + ';base64,' + e.base64());
      },
    };
  }
}

Thanks

4
javascriptangulartinymcetinymce-4

4 Answers

4
votes

The documentation you referenced is how to get TinyMCE integrated in an Angular application. What I believe you want to do is:

  1. Add a toolbar button to the toolbar
  2. Clicking the toolbar button inserts content at the current cursor location

Fundamentally the fact that you are using Angular is not important to either of these goals so you won't see anything Angular specific in the following details.

Adding a Toolbar Button

This is done (in TinyMCE 5) via the tinymce.editor.ui.registry.addButton() API. This is documented here: https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addbutton

Inserting Content at the Cursor

This is done (in TinyMCE 5) via the tinymce.editor.insertContent() API. This is documented here: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent

The simplest way to do all of this is to use your TinyMCE configuration via the setup() function. You can add the button and determine what actions (via JavaScript) it will take when clicked all in one place.

Here is an example: http://fiddle.tinymce.com/fHgaab

1
votes

Seems like you are linking examples for a different library. So those wouldn't work. Is there any reason you chose to use the TinyMCE library instead of https://www.npmjs.com/package/angular2-tinymce ?

I've looked into the source code and couldn't find an easy way of targeting the tinyMCE instance through ViewChild, which is possible with the other library.

0
votes

Michael's answer is correct, as it isn't important that I'm using Angular.

But I thought it would be worth sharing the Angular implementation for future reference.

TL;DR: Here's an example StackBlitz - Angular TinyMCE Insert Text at Cursor

The process included:

  • Upgrading to the (currently) latest versions of TinyMCE and TinyMCE Angular:

  • Importing EditorModule:

    /* ... */

import { EditorModule } from '@tinymce/tinymce-angular';

imports: [
  /* ... */
  EditorModule
]

/* ... */

  • Initialise the editor in the component (notice the setup() function for this case):

    export class AppComponent implements OnInit {
  name = 'Angular & TinyMCE';
  tinyMceConfig: any;

  ngOnInit() {
    this.configureTinyMce();
  }

  configureTinyMce() {
    this.tinyMceConfig = {
      branding: false,
      /**
      * 'content_css' is needed to prevent console errors
      * if you're hosting your own TinyMCE,
      * You'll also need to add the following to angular.json:
      *  /* ... */
      *  "scripts": [
      *    "node_modules/tinymce/tinymce.min.js",
      *    "node_modules/tinymce/themes/silver/theme.js"
      *  ]
      *  /* ... */
      */
      // content_css: 'assets/tinymce/skins/ui/oxide/content.min.css',
      height: 400,
      image_advtab: true,
      imagetools_toolbar: `
        rotateleft rotateright |
        flipv fliph | 
        editimage imageoptions`,
      importcss_append: !0,
      inline: false,
      menubar: true,
      paste_data_images: !0,
      /**
      * 'skin_url' is needed to prevent console errors 
      * if you're hosting your own TinyMCE
      */
      // skin_url: 'assets/tinymce/skins/ui/oxide',
      toolbar: `
        insertText |
        copy undo redo formatselect |
        bold italic strikethrough forecolor backcolor |
        link | alignleft aligncenter alignright alignjustify |
        numlist bullist outdent indent |
        removeformat`,
      setup: (editor) => {
        editor.ui.registry.addButton('insertText', {
          text: 'Press Me To Insert Text!',
          onAction: () => {
            editor.insertContent('<strong>Hello World!</strong>');
          }
        });
      }
    };
  }
}

  • The HTML is simply: 

    <editor [init]="tinyMceConfig"></editor>
0
votes

For anyone looking at this recently ( Mar 2021 ), this is how to send commands to tiny mce in angular 11:

import {Component, OnInit, ViewChild} from '@angular/core';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {EditorComponent as tiny} from '@tinymce/tinymce-angular';

@Component({
  selector: 'app-test-tiny',
  templateUrl: './test-tiny.component.html',
  styleUrls: ['./test-tiny.component.scss']
})
export class TestTinyComponent implements OnInit {
  @ViewChild(tiny) tinyEditor: tiny;
  contents = 'Hello World';

  get preview(): SafeHtml {
    return this.san.bypassSecurityTrustHtml(this.contents);
  }

  constructor(protected san: DomSanitizer) {
  }

  ngOnInit(): void {
  }

  doTest(): void {
    this.tinyEditor.editor.execCommand('mceInsertContent', false, '<h1>Dude</h1>');
  }

}