Вставьте текст в курсор, используя tinyMCE и Angular - PullRequest
Новая
       23

Вставьте текст в курсор, используя tinyMCE и Angular

0 голосов
/ 03 мая 2019

Используя 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());
      },
    };
  }
}

Спасибо

Ответы [ 3 ]

1 голос
/ 04 мая 2019

В документации, на которую вы ссылаетесь, рассказывается, как интегрировать TinyMCE в приложение Angular. Я считаю, что вы хотите сделать это:

  1. Добавление кнопки панели инструментов на панель инструментов
  2. Нажатие кнопки на панели инструментов вставляет содержимое в текущую позицию курсора

Фактически тот факт, что вы используете Angular, не важен ни для одной из этих целей, поэтому вы не увидите ничего специфичного для Angular в следующих деталях.

Добавление кнопки панели инструментов

Это делается (в TinyMCE 5) через tinymce.editor.ui.registry.addButton() API. Это задокументировано здесь: https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addbutton

Вставка содержимого в курсор

Это делается (в TinyMCE 5) через tinymce.editor.insertContent() API. Это задокументировано здесь: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent

Самый простой способ сделать все это - использовать конфигурацию TinyMCE с помощью функции setup(). Вы можете добавить кнопку и определить, какие действия (через JavaScript) она будет выполнять при нажатии на все в одном месте.

Вот пример: http://fiddle.tinymce.com/fHgaab

1 голос
/ 03 мая 2019

Похоже, вы связываете примеры для другой библиотеки. Так что это не сработает. Есть ли причина, по которой вы решили использовать библиотеку TinyMCE вместо https://www.npmjs.com/package/angular2-tinymce?

Я изучил исходный код и не смог найти простой способ нацеливания на экземпляр tinyMCE через ViewChild, что возможно с другой библиотекой.

0 голосов
/ 06 мая 2019

Ответ Майкла правильный, так как не важно, что я использую Angular.

Но я подумал, что стоит поделиться реализацией Angular для дальнейшего использования.

TL; DR: вот пример StackBlitz - Угловая вставка текста TinyMCE в курсор

Процесс включал:

  • Обновление до (в настоящее время) последних версий 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>
...