Personalizar botones Quicktags del editor HTML para abrir un diálogo de opciones de inserción

Question

Personalizar botones Quicktags del editor HTML para abrir un diálogo de opciones de inserción

5 sept 2011, 00:42:59

Vistas: 857

Votos: 9

Estoy buscando añadir botones quicktags personalizados que me permitan mostrar un diálogo intermedio antes de insertar el código.

Situación

Al hacer clic en un botón quicktag se abre un diálogo o ventana modal thickbox.
El diálogo muestra algunas opciones como la clase, etc. y un botón Insertar.
Al hacer clic en "Insertar" se añade el código.

Antecedentes

Para añadir un botón quicktags, usaríamos:

edButtons[ edButtonsLength+ ] = new edButton(
    'ed_mybutton' , 'Insertar botón', '<div class="class-name">', '</div>'
);
////
edHTML += '<input type="button" value="Insertar código personalizado" id="ed_my_button" class="ed_button" onclick="edInsertTag( edCanvas, edButtonLength_t + 1)" title="Insertar código" />';

¿Cómo puedo hacer que el botón abra un diálogo (o modal thickbox) en lugar de insertar directamente?

Puedo añadir un botón sin definirlo, así:

edHTML += '<input type="button" value="Insertar código personalizado" id="ed_my_button" class="ed_button" onclick="customFunction()" title="Insertar código" />';
// y
var customFunction = function() {
   openURL = '<?php admin_url() ?>admin-ajax.php?action="insertCodeAction&TB_iframe=true';
   tb_show( 'Insertar código personalizado', openURL );
};

Por favor comparte tu sabiduría. Gracias de antemano.

PS: hacer esto con TinyMCE es relativamente fácil, me pregunto cómo hacerlo con HTML quicktags. :)

OpenOne

182

publicaciones editor quicktag

Comentarios

No tengo ni idea de cómo añadir un modal, abrir un cuadro de diálogo, pero sí una solución para reemplazar el código y publicarlo como contexto y añadir una clase css, quizás esto te ayude un poco. Puedes encontrar el código aquí: https://github.com/bueltge/AddQuicktag/blob/master/js/add-quicktags.dev.js#L150

bueltge

1 jun 2018 12:37:35

Todas las respuestas a la pregunta

Comentarios

esto no me está dando salida

Amol Bhandari SJ

25 nov 2019 09:51:13

dean1997 21 · Answer 1 · 2014-04-16T00:38:46Z

Según el Codex, no puedes hacer esto directamente a través de la API. Sin embargo, puedes hacerlo utilizando tu propio archivo quicktags.js como se muestra a continuación.

function sample_load_admin_scripts()
{
  if ( is_admin() ) {
    wp_deregister_script('quicktags');
    wp_register_script('quicktags', ("/ruta/a/tu/quicktags.js"), false, '', true);
  }
}

if (is_admin()) {
  add_action('init', sample_load_admin_scripts);
}

Luego solo añade Javascript para hacer tu trabajo. El formato es relativamente fácil, pero como ya sabes cómo hacer todo con TinyMCE no voy a entrar en eso. Obtén tu propio archivo quicktags.js aquí.

dean1997

21

16 abr 2014 00:38:46