Есть ли способ получить обратный вызов после изменения информации об изображении в tinymce? - PullRequest
0 голосов
/ 16 мая 2018

Я хочу получить обратный вызов после изменения атрибута ALT на изображении.Изображение выше показывает функциональность.

  1. После включения изображения я щелкнул по изображению, а затем нажал кнопку «Параметры изображения» (или «Вставить / редактировать изображение»).

  2. Откроется окно.После изменения данных я хочу перезвонить, чтобы получить новый альтернативный текст и затем сохранить в базе данных.

Я пытался эти опции , но неработа.

Мой плагин TinyMCE - это TinyMCE Rails Gem .Tinymce работает нормально, я только хочу, чтобы обратный вызов получал alt attr после изменения, используя диалоговое окно TinyMCE по умолчанию.

Настройки TinyMCE:

  tinyMCE.init({
    selector: "textarea.tinymce",
    menubar: false,
    paste_as_text: true,
    resize: true,
    height: 500,
    language: "pt_BR",
    style_formats: [{"title":"Título Principal","block":"h1"},{"title":"Título Secundário","block":"h2"},{"title":"Título Terciário","block":"h3"},{"title":"Título Menor","block":"h4"},{"title":"Parágrafo normal","block":"p"}],
    plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,imagetools,wordcount",
    toolbar: ["undo redo removeformat | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr | link | forecolor backcolor emoticons"]
  });

Спасибо!

РЕДАКТИРОВАТЬ 1

После изменения настроек оттенков, включая file_browser_callback, ничего не происходит.Код:

Настройки TinyMCE:

  tinyMCE.init({
    selector: "textarea.tinymce",
    menubar: false,
    paste_as_text: true,
    resize: true,
    height: 500,
    language: "pt_BR",
    style_formats: [{"title":"Título Principal","block":"h1"},{"title":"Título Secundário","block":"h2"},{"title":"Título Terciário","block":"h3"},{"title":"Título Menor","block":"h4"},{"title":"Parágrafo normal","block":"p"}],
    plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,imagetools,wordcount",
    toolbar: ["undo redo removeformat | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr | link | forecolor backcolor emoticons"],
    file_browser_callback: "UpdateImgAlt"
  });

Функция для получения обратного вызова:

function UpdateImgAlt(callback, value, meta){
  console.log('callback: '+callback);
  console.log('value: '+value);
  console.log('meta: '+meta);
}

1 Ответ

0 голосов
/ 17 мая 2018

Редактор не предоставляет конкретного события, связанного со вставкой изображения.Если вы посмотрите на исходный код плагина image, он вызовет событие change, чтобы вы могли получать уведомления, когда это произойдет.Код для получения этого уведомления будет выглядеть следующим образом:

tinymce.init({
  selector: '#myeditor',
  ...
  setup: function (editor) {
    editor.on('change', function (e) {
      console.log('change event fired');
      console.log(e);
      console.log('Content changed to:  ' + editor.getContent());
    });
  }
});

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

...