web-dev-qa-db-fra.com

Comment ajouter un bouton personnalisé à la barre d'outils tinyMCE?

Je souhaite ajouter un bouton personnalisé à la barre d'outils tinyMCE dans l'écran "Ajouter un nouveau message" qui, une fois cliqué, permettra d'insérer du texte dans le nouveau message.

J'ai essayé d'utiliser ce code (de http://tinymce.moxiecode.com/tryit/custom_toolbar_button.php ):

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!');
        }
    });
}

mais il ne parvient pas à compiler. Il y a une erreur sur la ligne avec ' setup: function (ed) '

Est-ce un échec parce que je dois faire référence à tinyMCE.js? Je n'ai pas trouvé ce fichier lors de l'installation de WordPress sur le serveur.

existe-t-il un meilleur moyen de créer le bouton?

poststinymce
2
Techboy

Votre problème, je crois, ce sont les lignes qui suivent les files d'attente et les scripts d'impression, vous mélangez Javascript avec PHP.

Javascript entre dans la section HTML d'un fichier PHP ou dans une instruction echo.

Cette page du codex donne un exemple d’ajout d’un bouton à TinyMCE dans WordPress.

Toutefois, cette entrée de codex peut être un peu datée. Par conséquent, en cas de problèmes de code, voici quelques exemples de code alternatifs à utiliser.

http://brettterpstra.com/adding-a-tinymce-button/
https://stackoverflow.com/questions/4413470/how-to-add-a-mailto-button-to-tinymce

RE: Problèmes de code

Dans un fichier PHP, HTML se situe entre les blocs PHP de fin et de début, comme suit.

?>

<div>example</div>

<?php

Ou alternativement dans une déclaration d'écho.

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

Javascript doit être traité de la même manière que HTML, donc le code ci-dessus (la partie JS) devrait ressembler à ceci:.

?>
<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

Ou..

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>
";

Le premier étant l'approche la plus facile à mon avis.

J'espère que cela répond à votre question et si vous avez besoin d'aide pour comprendre quelque chose, faites le moi savoir ..

5
t31os

Voici le code que j'utilise dans le thème 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>';
}
2
Satish Gandham