Как создать диалоги TinyMCE?

Question

Хорошо, ответ на этот вопрос действительно должен быть намного проще, если я могу просто найти соответствующую информацию в документации TinyMCE, но я не могу. То, что я хочу сделать, это следующее:

1. Пользователь либо выбирает текст в редакторе TinyMCE или не
2. Пользователь нажимает на кнопку
3. откроется диалоговое окно с выделенным текстом в одном из трех полей (я хочу иметь возможность создать ссылку bit.ly из полного URL-адреса в редакторе)
4. Пользователь нажимает OK, происходит волшебство, и они отправляются обратно в редактор с измененным контентом.

Так что, в сущности, мне действительно нужно знать, как заставить всплывающее окно работать, по крайней мере, на данный момент. Проблема заключается в следующем: поиск по «tinymce popup», «диалог tinymce», «tinymce prompt user», не приносит ничего полезного, что я вижу.

Answer 1

Самый чистый способ сделать что-то подобное с помощью плагина TinyMCE.

На сайте TinyMCE есть tutorial to creating a plugin. В этом примере используется плагин , который является частью пакета загрузки TinyMCE.

Хорошей новостью является то, что пример плагина принимает выделенный текст и отображает его в диалоговом окне. Это должно дать вам базовые основы для развития.

Answer 2

Учебники по созданию диалогового окна/подсказки в TinyMCE перемещены, а некоторые примеры того, как это сделать, исчезли. Существует новый учебник, который охватывает creating plugins and dialogs for TinyMCE 4.

Соответствующая часть:

// Open window 
editor.windowManager.open({ 
    title: 'Example plugin', 
     body: [ 
      {type: 'textbox', name: 'title', label: 'Title'} 
     ], 
     onsubmit: function(e) { 
      // Insert content when the window form is submitted 
      editor.insertContent('Title: ' + e.data.title); 
     } 
});