Как добавить кнопку загрузки файла в форме TinyMCE?

Для добавления кнопки загрузки файла в форме TinyMCE, вам потребуется выполнить несколько шагов.

1. Создайте HTML-элемент для кнопки загрузки файла в вашей форме. Например:

<input type="file" id="file-upload" name="file-upload">
<button type="button" id="upload-button">Upload</button>

2. Включите TinyMCE в вашем текстовом поле для редактирования и настройте его с помощью соответствующих параметров. Например:

tinymce.init({
  selector: '#editor',
  plugins: 'image',
  toolbar: 'image',
  file_picker_types: 'file image media',
});

Здесь мы включаем плагин image и добавляем кнопку в панель инструментов с помощью toolbar: 'image'. Также мы указываем filepickertypes: 'file image media', чтобы позволить выбирать файлы изображений и медиафайлы.

3. Добавьте обработчик события для кнопки загрузки файла. Например:

document.getElementById('upload-button').addEventListener('click', function() {
  document.getElementById('file-upload').click();
});

Здесь мы добавляем обработчик события клика на кнопку загрузки файла. При клике на кнопку, мы программно вызываем клик на элементе input для выбора файла.

4. Создайте обработчик события выбора файла для элемента input. Например:

document.getElementById('file-upload').addEventListener('change', function() {
  var file = this.files[0];
  if (file) {
    var reader = new FileReader();
    reader.onload = function(e) {
      tinymce.activeEditor.insertContent('<img src="' + e.target.result + '">');
    }
    reader.readAsDataURL(file);
  }
});

Здесь мы добавляем обработчик события изменения input. После выбора файла, мы считываем его содержимое с помощью FileReader и вставляем изображение в редактор TinyMCE с использованием метода insertContent.

Обратите внимание, что приведенный выше код является примером и может потребоваться дополнительная настройка в зависимости от вашей конкретной ситуации. Однако, он демонстрирует основные шаги, необходимые для добавления кнопки загрузки файла в форме TinyMCE.