Question

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

据我了解，我需要在onExecCommand命令中使用mceInsertContent事件。

我看了以下内容：

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

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

谢谢

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

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>

Answer 4

对于最近（2021 年 3 月）查看此内容的任何人，以下是向 angular 11 中的小 mce 发送命令的方法：

dialogStore

使用tinyMCE和Angular

editor-dialog.component.html

editor-dialog.component.ts

4 个答案: