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

Question

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

据我了解，我需要onExecCommand通过命令使用该事件mceInsertContent。

我查看了以下内容：

• 如何在TinyMCE编辑器中光标所在位置插入文本？
• 在 TinyMCE 编辑器中光标所在位置插入文本

但这些解决方案在这种情况下没有帮助。

这是文档

编辑器-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 集成到 Angular 应用程序中。我相信你想做的是：

1. 向工具栏添加工具栏按钮
2. 单击工具栏按钮可在当前光标位置插入内容

从根本上讲，您使用 Angular 对这两个目标都不重要，因此您不会在以下详细信息中看到任何 Angular 特有的内容。

添加工具栏按钮

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

在光标处插入内容

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

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

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