web-dev-qa-db-fra.com

Ajouter des boutons quicktag à l'éditeur HTML

J'essaie de comprendre comment modifier l'éditeur HTML dans wordpress; sur l'image ci-dessous, vous pouvez voir une capture d'écran de l'éditeur et les boutons en haut. Est-il possible d'ajouter de nouveaux boutons? J'aimerais ajouter un bouton qui insérera des balises "" ainsi que des balises de code court personnalisées. Je sais que ce n'est pas impossible, mais est-ce que quelqu'un sait comment le faire?

enter image description here

editorhtml-editor
5
JasonDavis

Téléchargez et installez le plug-in HTML Editor Reloaded et accédez aux pages de configuration pour ajouter vos propres boutons.

http://wordpress.org/extend/plugins/html-editor-reloaded/

1
Mohit Bumb

Si cela devient trop difficile et compliqué, vous pouvez simplement ajouter de nouveaux boutons en utilisant jQuery. Il suffit de cloner un bouton existant ou d'en créer un nouveau et de l'ajouter à la barre d'outils de l'éditeur. Vous pouvez envelopper le javascript avec une fonction php, et l'exécuter dans le pied de page de l'administrateur ou quelque chose du genre.

Ou vous pouvez utiliser la fonction edButton. Voici un exemple écrit sale et rapide pour l’ajout de boutons p et pré.

// Add buttons to html editor
add_action('admin_print_footer_scripts','eg_quicktags');
function eg_quicktags() {
?>
<script type="text/javascript" charset="utf-8">
buttonA = edButtons.length;
edButtons[edButtons.length] = new edButton('ed_paragraph','p','<p>','</p><br />','p');
buttonB = edButtons.length;
edButtons[edButtons.length] = new edButton('ed_pre','pre','<pre lang="php">','</pre>','r');

jQuery(document).ready(function($){
    jQuery("#ed_toolbar").append('<input type="button" value="p" id="ed_paragraph" class="ed_button" onclick="edInsertTag(edCanvas, buttonA);" title="p" />');
    jQuery("#ed_toolbar").append('<input type="button" value="pre" id="ed_pre" class="ed_button" onclick="edInsertTag(edCanvas, buttonB);" title="pre" />');
}); 
</script>
<?php
}

EDIT: Dans Wordpress 3.3 (et ci-dessus), l'ajout de la balise rapide est modifié. Cependant, la solution edButton paresseuse fonctionne d’une manière ou d’une autre, certains plugins peuvent l’annuler.

La nouvelle façon d’ajouter de nouveaux boutons à l’éditeur HTML est la suivante:

// Add buttons to html editor
add_action('admin_print_footer_scripts','eg_quicktags');
function eg_quicktags() {
?>
<script type="text/javascript" charset="utf-8">
/* Adding Quicktag buttons to the editor Wordpress ver. 3.3 and above
* - Button HTML ID (required)
* - Button display, value="" attribute (required)
* - Opening Tag (required)
* - Closing Tag (required)
* - Access key, accesskey="" attribute for the button (optional)
* - Title, title="" attribute (optional)
* - Priority/position on bar, 1-9 = first, 11-19 = second, 21-29 = third, etc. (optional)
*/
QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p' );
QTags.addButton( 'eg_pre', 'pre','<pre lang="php">', '</pre>', 'q' );
</script>
<?php
}

Je ne sais pas encore si les QTags ont été ajoutés au Codex Wordpress. J'ai donc ajouté les paramètres requis dans la section commentaires du code.

8
emrahgunduz

Voir ce qui suit dans wp-includes/js/quicktags.dev.js

/**
     * Main API function for adding a button to Quicktags
     * 
     * Adds qt.Button or qt.TagButton depending on the args. The first three args are always required.
     * To be able to add button(s) to Quicktags, your script should be enqueued as dependent
     * on "quicktags" and outputted in the footer. If you are echoing JS directly from PHP,
     * use add_action( 'admin_print_footer_scripts', 'output_my_js', 100 ) or add_action( 'wp_footer', 'output_my_js', 100 )
     *
     * Minimum required to add a button that calls an external function:
     *     QTags.addButton( 'my_id', 'my button', my_callback );
     *     function my_callback() { alert('yeah!'); }
     *
     * Minimum required to add a button that inserts a tag:
     *     QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
     *     QTags.addButton( 'my_id2', 'my button', '<br />' );
     *
     * @param id string required Button HTML ID
     * @param display string required Button's value="..."
     * @param arg1 string || function required Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
     * @param arg2 string optional Ending tag like "</span>"
     * @param access_key string optional Access key for the button.
     * @param title string optional Button's title="..." 
     * @param priority int optional Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
     * @param instance string optional Limit the button to a specifric instance of Quicktags, add to all instances if not present.
     * @return mixed null or the button object that is needed for back-compat.
     */             
    qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance ) {
3
Aram Kocharyan

Cela pourrait être utile à quelqu'un aussi ...

http://scribu.net/wordpress/right-way-to-add-custom-quicktags.html

2
luckykind

Voici mon exemple de comment ajouter des boutons et & au texte de l'éditeur wp

ajoutez ce code à functions.php et sauvegardez le fichier après avoir vérifié le texte de votre éditeur

j'espère vous aider ^^

/*-----------------------------------------------*/
/* Add Text Editor Buttons
/*-----------------------------------------------*/
function urban_add_quicktags() {
//check to see if the 'quicktags' script is in use to avoid errors
 if (wp_script_is('quicktags')){
?>
 <script type="text/javascript">
 QTags.addButton( 'h4-subheader', 'SubHeader4', '<h4>', '</h4>', '4', 'Sub Header', 1 );
 QTags.addButton( 'h3-subheader', 'SubHeader3', '<h3>', '</h3>', '3', 'Sub Header', 2 );
 QTags.addButton( 'bold', '<b>', '<b>', '</b>', '3', 'Paraphraph', 3 );
 </script>
<?php
 }
}
//Print to admin footer
add_action( 'admin_print_footer_scripts', 'urban_add_quicktags' );
1
Said Erraoudy

Vous devez utiliser l’API tinymce pour ajouter des boutons dans l’éditeur http://codex.wordpress.org/TinyMCE_Custom_Buttons

0
hacksy

EDIT

Oh, attends: tu utilises l'éditeur HTML. Le filtre ci-dessous sert à ajouter des boutons à l'éditeur Visual.

Presque toutes les références que je peux trouver me demandent d’éditer quicktags.js (et c’est ce que j’ai l'habitude de faire), mais je ne le fais pas recommande l'édition de fichiers de base. J'ai trouvé ce plugin (totalement non testé) qui est censé permettre la modification/l'ajout de boutons d'étiquette rapide de l'éditeur HTML.

RÉPONSE ORIGINALE

Vous pouvez ajouter des boutons aux rangées 1, 2 et 3.

Voici un exemple d’ajout de boutons à la rangée 3:

function mytheme_mce_buttons_row_3( $buttons ) {

    $buttons[] = 'fontselect';
    $buttons[] = 'fontsizeselect';
    $buttons[] = 'code';
    $buttons[] = 'sup';
    $buttons[] = 'sub';
    $buttons[] = 'backcolor';
    $buttons[] = 'separator';
    $buttons[] = 'hr';
    $buttons[] = 'wp_page';

    return $buttons;

}
add_filter( 'mce_buttons_3', 'mytheme_mce_buttons_row_3' );

Évidemment, vous utiliseriez 'mce_buttons_1' pour ajouter des boutons à la rangée 1 et 'mce_buttons_2' pour en ajouter à la rangée 2.

Si vous souhaitez ajouter votre propre bouton arbitraire, vous devez lui attribuer le marquage du tableau plutôt que le nom de la balise HTML.

0
Chip Bennett