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

【问题标题】：Insert text at cursor using tinyMCE and Angular使用 tinyMCE 和 Angular 在光标处插入文本
【发布时间】：2019-05-03 09:24:26
【问题描述】：

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

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

我看过以下内容：

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

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());
      },
    };
  }
}

谢谢

【问题讨论】：

标签： javascript angular tinymce tinymce-4

【解决方案1】：

您引用的文档是如何将 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

【讨论】：

谢谢迈克尔，我想我可以用这个。当我回到键盘前，我将升级到 TinyMCE 5 并随时通知您。
对于 Angular 示例，请参阅我的 answer

【解决方案2】：

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

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

【讨论】：

我没有选择图书馆，其他人选择了 :-)，但我想是因为我们使用的是“官方”图书馆。在此期间，我将研究另一个。谢谢
祝你好运！ @Wayne :)

【解决方案3】：

Michael's answer 是正确的，因为我使用 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>

【讨论】：

【解决方案4】：

对于最近（2021 年 3 月）查看此内容的任何人，这是向 angular 11 中的微型 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>');
  }

}

【讨论】：