web-dev-qa-db-fra.com

Est-il possible de créer des images d’espace réservé dans l’éditeur Wordpress cliquables (doit-il afficher le programme de téléchargement)?

Travailler sur un projet pour lequel je voudrais avoir des boutons dans la zone de l'éditeur visuel où l'utilisateur peut cliquer sur l'image de marque de réservation et afficher la boîte de dialogue de téléchargement.

J'ai vu que les gens créent leurs propres boutons qui ajoutent des cases que l'utilisateur doit ensuite sélectionner avec sa souris, puis cliquer sur le téléchargement de média ajouté. Pour moi, cela semble lié à une mauvaise expérience utilisateur. Ainsi, je cherche à voir si quelqu'un a vu un plugin qui fait cela.

http://s-plugins.wordpress.org/visual-editor-custom-buttons/assets/screenshot-4.png?rev=641514

Imaginez que vous pouvez réellement cliquer sur "Insérer une image ici" et faire apparaître une boîte de dialogue de téléchargement.

adminwp-adminshortcodeuploadstinymce
3
INT

une telle réponse deviendrait probablement inutilisable/inutilisable après une mise à jour de WordPress, à mesure que TinyMCE serait mise à jour et que les API changeraient - par @TomJNowell

Bien que je sois d’accord avec Tom, il existe toujours une réponse générale qui explique le concept général et les parties qui ne bougent pas.

Le plugin PHP pour définir le contenu par défaut

Tout d'abord, il doit y avoir du contenu par défaut. Et il y a un filtre pour ça:

<?php
/* Plugin Name: (#83397) Default TinyMCE Content */

add_filter( 'default_content', 'wpse83397_add_editor_default_content' );
public function wpse83397_add_editor_default_content( $content )
{
    if ( "your_post_type" !== get_current_screen()->post_type )
        return $content;

    return sprintf(
        '<img src="%s" title="Placeholder" />', 
        plugin_dir_path( __FILE__ ).'placeholder.png'
    );
}

TinyMCE JS événements

Ensuite, vous devez simplement ajouter un écouteur d'événement. Exemple tiré de la documentation officielle .

tinymce.activeEditor.on( 'GetContent', function( e ) {
    console.log( e.content );
} );

L'objet global WordPress wp

Enfin, il vous suffit de joindre l'action de dialogue Ouvrir le média au contenu lui-même. Il y a l’objet wp, qui contient la plupart des éléments de base de WordPress. Tapez simplement wp dans votre console et vous verrez que vous avez un accès global une fois que le DOM est prêt pour les éléments suivants:

  • Colonne vertébrale: Object
  • Uploader: function ( options )
  • ajax: Object
  • sauvegarde automatique: Object
  • battement de coeur: Heartbeat
  • html: Object
  • media: function ( attributes )
  • shortcode: function ( options )
  • modèle: function

Comme vous pouvez le constater, il existe également media et Backbone. Il suffit d'appuyer sur wp.media. dans votre console d'outils de développement Chrome (par exemple) et la fonction de saisie semi-automatique indique ce qui est disponible. En outre, Dominik Schilling, l’auteur de la médiathèque a un bel ensemble de démos pour la WP médiathèque sur GitHub .

2
kaiser