使用 tinyMCE 和 Angular 在光标处插入文本

Question

在 Angular 中使用 tinyMCE 我需要在光标位置插入文本，最好使用工具栏按钮。

据我了解，我需要将 onExecCommand 事件与 mceInsertContent 命令一起使用。

我查看了以下内容：

Inserting text in TinyMCE Editor where the cursor is

但解决方案在这种情况下无济于事。

编辑-dialog.component.html

<editor [init]="tinyMceConfig"
  [formControl]="data.formControl">
</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());
      },
    };
  }
}

谢谢

Answer 1

您似乎正在链接不同库的示例。所以那些是行不通的。您选择使用 TinyMCE 库而不是 https://www.npmjs.com/package/angular2-tinymce 有什么原因吗？

我查看了源代码，但找不到通过 ViewChild 定位 tinyMCE 实例的简单方法，而其他库可以做到这一点。

Answer 2

您引用的文档是如何将 TinyMCE 集成到 Angular 应用程序中。我相信你想做的是：

将工具栏按钮添加到工具栏
单击工具栏按钮可在当前光标位置插入内容

从根本上说，您正在使用 Angular 这一事实对于这两个目标中的任何一个都不重要，因此您不会在以下详细信息中看到任何 Angular 具体内容。

添加工具栏按钮

这是通过 tinymce.editor.ui.registry.addButton() API 完成的（在 TinyMCE 5 中）。这记录在这里：https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addbutton

正在光标处插入内容

这是通过 tinymce.editor.insertContent() API 完成的（在 TinyMCE 5 中）。这记录在这里：https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent

完成所有这些操作的最简单方法是通过 setup() 函数使用您的 TinyMCE 配置。您可以添加按钮并确定在一个地方全部单击时将执行的操作（通过 JavaScript）。

这是一个例子：http://fiddle.tinymce.com/fHgaab

Answer 3

是正确的，因为我使用 Angular.

并不重要

但我认为值得分享 Angular 实施以供将来参考。

TL;DR: 这是一个例子 StackBlitz - Angular TinyMCE Insert Text at Cursor

流程包括：

升级到（当前）最新版本的 TinyMCE 和 TinyMCE Angular:
- npm install tinymce@5.0.4
- npm install @tinymce/tinymce-angular@3.0.1

正在导入 EditorModule:

/* ... */

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

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

/* ... */

初始化组件中的编辑器（注意本例中的setup()函数）：

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>');
          }
        });
      }
    };
  }
}

HTML就是：

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

Answer 4

对于最近（2021 年 3 月）查看此内容的任何人，这是 angular11 中向微型 mce 发送命令的方法：

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>');
  }

}

使用 tinyMCE 和 Angular 在光标处插入文本

Insert text at cursor using tinyMCE and Angular

javascript

tinymce

tinymce-4

angular

编辑-dialog.component.html

编辑-dialog.component.ts