web-dev-qa-db-fra.com

Activer / Ajouter des raccourcis clavier personnalisés pour travailler avec l'éditeur HTML de WordPress

J'utilise Markdown dans mes messages et le plug-in que j'utilise à cette fin nécessite que l'éditeur visuel soit désactivé.

L'éditeur HTML est à peu près juste une zone de texte. Pour faciliter l’écriture, je souhaite activer certains raccourcis clavier personnalisés qui me permettent de formater le texte en markdown lorsqu’une combinaison de touches est enfoncée (comme Ctrl + B). Comment puis-je faire cela?

Fondamentalement, je veux juste quelques-uns des raccourcis clavier qui fonctionnent dans l'éditeur de publication de Wordpress.StackExchange.com. Et ils sont...

  • Ctrl + B → ** Texte en gras **

  • Ctrl + I → Texte italien

  • Ctrl + Q →> devis

    • Ce qui précède devrait fonctionner même s'il y a plusieurs lignes de texte cité)

  • Ctrl + K →

    • envelopper le texte en ligne avec `

    • indenter chaque ligne de quatre espaces s'il y a plusieurs lignes

PS: Je ne connais pas JavaScript ou PHP, essayez donc d'être le plus clair possible. Merci.

customizationhtml-editormarkdown
4
its_me

La barre d’outils/éditeur utilisée sur les sites Web Stack Exchange (et dans mon plug-in WP-MarkDown ) est PageDown .

Cela vient avec trois fichiers JavaScript:

  • Celui qui gère la conversion MarkDown en HTML
  • Celui qui gère la désinfection
  • Celui qui gère l'éditeur (la barre d'outils et l'aperçu)

Inclus dans ce dernier sont les raccourcis clavier MarkDown que vous avez mentionnés.

Ce qui suit n'a pas été testé, mais vise simplement à donner un aperçu de ce que vous devez faire.

Étape 1: Inscrivez-vous et mettez en file d'attente JavaScript et les styles

Pour que cela fonctionne avec l'éditeur WordPress, inscrivez-vous d'abord et mettez en file d'attente les scripts ci-dessus (pointez sur le bon emplacement dans votre plug-in). (je ne suis pas sûr qu'il soit nécessaire d'enregistrer des scripts lorsqu'ils ont des dépendances avant de les mettre en file d'attente)

Comme ceci n’est que pour l’administrateur, nous utilisons admin_enqueue_scripts. Vous voudrez aussi vérifier

  • Nous sommes sur la bonne page d'administration
  • Le type de publication (dans le cas où MarkDown n'est activé que pour un certain type de publication)

En outre, une fonction est accrochée au pied de page de l’administrateur. Cela imprimera JavaScript dans le pied de page. (Vous pouvez le placer dans un fichier séparé, l'enregistrer et le mettre en file d'attente ici, mais il doit être chargé après , le script de la barre d'outils WordPress standard est chargé). D'où le numéro de priorité: 100.

add_action('admin_enqueue_scripts', 'wpse49449_admin_scripts',10,1);
function wpse49449_admin_scripts($hook){
    $screen = get_current_screen();
    $post_type = $screen->post_type;

        //Enqueue only on page needed and only for the relevant post type
        if ( ('post-new.php' == $hook || 'post.php' == $hook) && $post_type == 'post' ){
             $plugin_dir = plugin_dir_url(__FILE__);
             wp_register_script('my_md_convert', $plugin_dir. 'js/pagedown/Markdown.Converter.js',array(),'1.1' );
             wp_register_script('my_md_sanit', $plugin_dir.'js/pagedown/Markdown.Sanitizer.js',array(),'1.1' );
             wp_register_script('my_md_edit',$plugin_dir. 'js/pagedown/Markdown.Editor.js',array('my_md_convert','my_md_sanit'),'1.1' );

             wp_enqueue_script('my_md_edit');
             wp_enqueue_script('jquery');

             wp_enqueue_style('my_md_style',$plugin_dir.'css/demo.css');

             add_action( 'admin_print_footer_scripts', 'wpse49449_admin_footers_script',100 );
    }
}

Étape 2: Désactivez l'éditeur TinyMCE le cas échéant

Le TinyMCE devra être désactivé. Mais ne le désactivez que pour les types de publication pour lesquels vous utilisez l'éditeur MarkDown. Pour désactiver l'éditeur TinyMCE:

add_filter( 'user_can_richedit', 'wpse49449_disable_tinymce_editor'), 99 );
function wpse49449_disable_tinymce_editor(){
    //Get post type
    $screen = get_current_screen();
    $post_type = $screen->post_type;

    //Disable depending on post type

    //Return 'false' to disable TinyMCE, 'true' otherwise. 
    return false;
}

Étape 3: remplacer la barre d'outils de l'éditeur "standard" par la barre d'outils MarkDown

Comme indiqué ci-dessus, la fonction wpse49449_admin_footers_script affiche du code JavaScript dans le pied de page. Il

  • ajoute la case 'aperçu' après l'éditeur de texte, #wp-content-editor-container
  • remplace la barre d'outils par défaut #ed_toolbar par la barre d'outils MarkDown.
  • initialise le convertisseur MarkDown-> HTML
  • initialise l'éditeur MarkDown

La fonction:

  function wpse49449_admin_footers_script(){
    ?> <script>

    jQuery(document).ready(function($) {                
        $('#wp-content-editor-container').after("<div id='wmd-previewcontent' class='wmd-panel wmd-preview prettyprint'></div>");

        $('#ed_toolbar').html("<div id='wmd-button-barcontent'></div>");

        var converter = new Markdown.getSanitizingConverter();
        var editor = new Markdown.Editor(converter, 'content');
        editor.run();
    });
    </script>
     <?php
    }

Cela devrait vous aider à commencer :).

Étape 4: Solution de contournement Editor.js

Le fichier JavaScript Markdown.Editor.js suppose que l'ID de zone de texte sera "wmd-input" + postfix, où postfix est une variable définie comme "contenu" dans cette ligne à l'étape 3:

var editor = new Markdown.Editor(converter, 'content');

Le problème est que l'ID de la zone de texte est content et non wmd-input. Nous ne souhaitons pas modifier l'ID de la zone de texte. Nous pouvons donc modifier la fonction chargée d'indiquer à l'éditeur de MarkDown les ID de la barre d'outils, de l'aperçu et de la zone de texte (autour de la ligne 249 je crois). Nous changeons ceci:

function PanelCollection(postfix) {
    this.buttonBar = doc.getElementById("wmd-button-bar" + postfix);
    this.preview = doc.getElementById("wmd-preview" + postfix);
    this.input = doc.getElementById("wmd-input" + postfix);
};

pour ça:

function PanelCollection(postfix) {
    this.buttonBar = doc.getElementById("wmd-button-bar" + postfix);
    this.preview = doc.getElementById("wmd-preview" + postfix);
    this.input = doc.getElementById(postfix);
};
6
Stephen Harris