¿Cómo agregar un botón personalizado a la barra de herramientas tinyMCE?

2

Quiero agregar un botón personalizado a la barra de herramientas tinyMCE en la pantalla 'Agregar nueva publicación' que al hacer clic, insertará texto en la nueva publicación.

He intentado usar este código (de enlace ):

wp_admin_css('thickbox');
wp_print_scripts('jquery-ui-core');
wp_print_scripts('jquery-ui-tabs');
wp_print_scripts('post');
wp_print_scripts('editor');
add_thickbox();
wp_print_scripts('media-upload');
setup : function(ed)
{
    // Add a custom button
    ed.addButton('mybutton', 
    {
        title : 'My button',
        image : 'img/example.gif',
        onclick : function() 
        {
        // Add you own code to execute something on click
        ed.focus();
        ed.selection.setContent('Hello world!');
        }
    });
}

pero no compila. El error está en la línea con ' configuración: función (ed) '

¿Está fallando porque necesito hacer referencia a tinyMCE.js? No pude encontrar ese archivo bajo mi instalación de WordPress en el servidor.

¿hay una mejor manera de crear el botón?

    
pregunta Techboy 09.01.2011 - 18:25

2 respuestas

5

Su problema, creo, son las líneas que siguen a las colas y los scripts de impresión, está mezclando Javascript con PHP ..

Javascript va dentro de la sección HTML de un archivo PHP o dentro de una declaración de eco.

Esta página del códice da un ejemplo para agregar un botón a TinyMCE dentro de WordPress.

Sin embargo, la entrada del códice puede estar un poco desactualizada, por lo que en el caso de problemas con el código aquí hay algunos ejemplos de código alternativos para trabajar.

enlace
enlace

RE: Problemas de código

Dentro de un archivo PHP, el HTML va entre los bloques de PHP de finalización e inicio, como así ...

?>

<div>example</div>

<?php

O alternativamente dentro de una declaración de eco.

echo '<div>example</div>';

Javascript debe tratarse de la misma manera que HTML, por lo que el código anterior (la parte JS) debería tener este aspecto ...

?>
<script type="text/javascript">
setup : function(ed)
{
     // Add a custom button
     ed.addButton('mybutton', 
     {
          title : 'My button',
          image : 'img/example.gif',
          onclick : function() 
          {
          // Add you own code to execute something on click
          ed.focus();
          ed.selection.setContent('Hello world!');
     }
});
</script>
<?php

O ..

echo "
<script type=\"text/javascript\">
setup : function(ed)
{
     // Add a custom button
     ed.addButton('mybutton', 
     {
          title : 'My button',
          image : 'img/example.gif',
          onclick : function() 
          {
          // Add you own code to execute something on click
          ed.focus();
          ed.selection.setContent('Hello world!');
     }
});
</script>
";

El primero es el enfoque más fácil en mi opinión.

Espero que responda a tu pregunta, y si necesitas ayuda para entender algo, házmelo saber ...

    
respondido por el t31os 09.01.2011 - 18:43
2

Este es el código que uso en el tema Swift:

(function() {
    tinymce.create('tinymce.plugins.tinyplugin', {

        init : function(ed, url){
            ed.addButton('note', {
            title : 'Insert a note',
                onclick : function() {
            var sel = ed.selection.getContent();
                    ed.execCommand(
                    'mceInsertContent',
                    false,
                    swift_notice(sel)
                    );
                },
                image: url + "/note.png"
            });
}

function swift_notice(seldata) {
    return '<p class="note"><span class="bg"> </span>'+ seldata + '</p>';
}
    
respondido por el Satish Gandham 10.01.2011 - 09:49

Lea otras preguntas en las etiquetas