Cómo crear cuadros de diálogo TinyMCE?

Question

Bien, la respuesta a esta pregunta realmente será mucho más fácil si pudiera encontrar la información relevante dentro de la documentación de TinyMCE, pero no puedo. Lo que quiero hacer es la siguiente:

1. usuario o bien selecciona texto en el editor TinyMCE o no
2. usuario hace clic en el botón
3. de diálogo se abre con el texto seleccionado en uno de los tres campos (quiero ser capaz de crear un enlace bit.ly desde una URL completa en el editor)
4. El usuario hace clic en Aceptar, ocurre magia y se envían al editor con el contenido que acaba de cambiar.

Así que, básicamente, todo lo que realmente necesito es saber cómo hacer que la ventana emergente funcione, al menos por ahora. El problema es: la búsqueda por "tinymce popup", "tinymce dialog", "tinymce prompt user" no da para nada nada útil que pueda ver.

Answer 1

La forma más limpia de hacer algo como esto es con un complemento TinyMCE.

En el sitio TinyMCE hay un tutorial to creating a plugin. Esto usa el ejemplo que forma parte del paquete de descarga TinyMCE.

La buena noticia es que el plugin de ejemplo toma el texto seleccionado y lo muestra dentro de un cuadro de diálogo. Esto debería darle un marco básico sobre el cual construir.

Answer 2

Los tutoriales sobre cómo crear un cuadro de diálogo/solicitud en TinyMCE se han movido y algunos de los ejemplos de cómo hacerlo desaparecieron. Hay un nuevo tutorial que cubre creating plugins and dialogs for TinyMCE 4.

La parte pertinente es:

// 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); 
     } 
});