получить выбранный файл в CkEditor и добавить пользовательскую кнопку загрузки - PullRequest
Новая
       14

получить выбранный файл в CkEditor и добавить пользовательскую кнопку загрузки

0 голосов
/ 15 февраля 2019
  1. я использую ngx-ckeditor: "0.4.0" в угловом значении 5.
  2. я хочу загрузить изображение и добавить пользовательскую кнопку загрузки

  3. ниже мой HTML. 

    <ck-editor 
          #ckeditor 
          name="html_template" 
          [(ngModel)]="mailModel.html_template" 
          [config]="ckEditorConfig">
</ck-editor>

  4. вот мой код компонента. 

    this.ckEditorConfig = {
   filebrowserBrowseUrl : '/application/crm/distribution-list/create-mail',
   filebrowserUploadUrl : 'http://192.168.0.107:8000/api/crm/v1.0/crm-distribution-library-files',
   fileTools_requestHeaders :{
      'X-Requested-With': 'XMLHttpRequest',
      Authorization: 'Bearer ' + localStorage.getItem('access_token')
   },
   filebrowserUploadMethod : 'xhr',
   removeButtons: 'Forms,Iframe,Blocks,Subscript,Superscript,Maximize,Undo',
};

  5. с этим кодом я не могу получить изображение и могу 'Я не могу передать свой пользовательский заголовок.

Я хочу получить выбранное изображение и добавить пользовательскую кнопку «Загрузить изображение».

1 Ответ

0 голосов
/ 29 апреля 2019

ниже приведен код для добавления пользовательской кнопки в CkEditor 

@ViewChild('ckeditor') ckeditor: CKEditorComponent;

ngAfterViewInit(): void {
    this._addImageUploadBtn();
}

_addImageUploadBtn() {
    const editor = this.ckeditor && this.ckeditor.instance;
    if (!editor) {
      return;
    }
    var that = this;
    editor.ui.addButton('uploadImage', {
        icon: 'https://img.icons8.com/ios/50/000000/image.png',
        label: 'Upload Image',
        command: 'uploadImage',
        toolbar: 'insert'
      });
    editor.addCommand('uploadImage', {
      exec: function(editor: any) {
        // Remove img input.
        [].slice.apply(document.querySelectorAll('.ck-editor-upload-img')).forEach((img: any) => {
          img.remove();
        });
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('class', 'ck-editor-upload-img');
        input.style.display = 'none';
        input.addEventListener('change', e => {
            const file = (e.target as HTMLInputElement).files[0];
            if (file) {
               console.log(file);
               // Do Stuff
            }
          },
          false
        );
        document.body.appendChild(input);
        input.click();
      }
    });
  }

здесь вы получаете выбранный файл изображения, а также получаете пользовательский щелчок кнопки.

...