Habilitar / adicionar atalhos de teclado personalizados para trabalhar com o editor de HTML do WordPress

4

Eu uso o Markdown em meus posts, e o plugin que eu uso para esse propósito requer que o editor visual seja desativado.

O editor de HTML é basicamente uma caixa de texto. Para tornar a escrita mais fácil, gostaria de ativar alguns atalhos de teclado personalizados que me permitem formatar texto no markdown quando uma combinação de teclas é pressionada (como Ctrl + B ). Como faço isso?

Basicamente, eu só quero alguns dos atalhos de teclado que funcionam no editor de postagem do Wordpress.StackExchange.com. E eles são ...

  • Ctrl + B → Texto em negrito **

  • Ctrl + I → texto _Italico _

  • Ctrl + Q → > Bloquear cotação

    • O acima deve funcionar mesmo se houver várias linhas de texto entre aspas)
  • Ctrl + K

    • envolva texto em linha com '

    • indente cada linha por quatro espaços se houver várias linhas

PS: Eu não sei JavaScript nem PHP, então, por favor, tente ser o mais claro possível. Obrigado.

    
por its_me 18.04.2012 / 18:18

2 respostas

6

A barra de ferramentas / editor usado nos sites do Stack Exchange (e no meu plug-in WP-MarkDown ) é PageDown .

Isso vem com três arquivos JavaScript:

  • Um que lida com MarkDown para conversão em HTML
  • Aquele que lida com sanitização
  • Um que lida com o editor (a barra de ferramentas e o visualizador)

Incluídos no último estão os atalhos de teclado do MarkDown que você mencionou.

O seguinte não foi testado, mas apenas visa dar uma descrição do que você precisa fazer.

Etapa 1: registre & Enfileirar JavaScript e estilos

Para que isso funcione no editor do WordPress, primeiro registre e enfileire os scripts acima (aponte para o local correto em seu plug-in). (não tenho certeza se você precisa registrar scripts quando eles tiverem dependências antes de enfileirá-los)

Como isso é somente para o administrador, usamos admin_enqueue_scripts . Você também vai querer verificar

  • Estamos na página de administração correta
  • O tipo de postagem (no caso de o MarkDown só ser ativado para um determinado tipo de postagem)

Além disso, uma função é conectada ao rodapé do administrador. Isto irá imprimir JavaScript no rodapé. (Você poderia colocá-lo em um arquivo separado, registrá-lo e enfileirá-lo aqui, mas ele precisa ser carregado após o script para a barra de ferramentas padrão do WordPress do pântano ser carregado). Daí o número de prioridade: 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 );
    }
}

Etapa 2: desative o editor do TinyMCE quando apropriado

O TinyMCE precisará ser desativado. Mas apenas desative-o para tipos de postagens nas quais você está usando o editor MarkDown. Para desativar o editor 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;
}

Etapa 3: Substitua a barra de ferramentas do editor 'padrão' pela barra de ferramentas MarkDown

Como mencionado acima, a função wpse49449_admin_footers_script imprime algum JavaScript no rodapé.

  • adiciona a caixa 'preview' após o editor de texto, #wp-content-editor-container
  • substitui a barra de ferramentas padrão #ed_toolbar pela barra de ferramentas MarkDown.
  • inicializa o conversor de HTML MarkDown- >
  • inicializa o editor do MarkDown

A função:

  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
    }

Isso deve ajudá-lo a começar:).

Etapa 4 Solução alternativa do Editor.js

O arquivo JavaScript Markdown.Editor.js assume que o ID da área de texto será "wmd-input" + postfix , em que postfix é uma variável definida como 'conteúdo' nesta linha na etapa 3:

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

O problema é que o ID da área de texto é content não wmd-input . Nós não queremos mudar o ID da textarea, então ao invés disso podemos alterar a função responsável por dizer ao editor do MarkDown os IDs da barra de ferramentas, visualização e área de texto (por volta da linha 249 eu acredito). Nós mudamos isso:

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

para isso:

function PanelCollection(postfix) {
    this.buttonBar = doc.getElementById("wmd-button-bar" + postfix);
    this.preview = doc.getElementById("wmd-preview" + postfix);
    this.input = doc.getElementById(postfix);
};
    
por Stephen Harris 19.04.2012 / 15:39
-2

Não sei como obter as combinações de teclas ctrl + b e outras para funcionar, mas aqui está uma lista dos atalhos para a seção HTML:

  • Negrito: Alt + SHIFT + b
  • Itálico: Alt + SHIFT + i
  • Bloquearquot: Alt + SHIFT + q
  • Tachado: Alt + SHIFT + d
  • Código: Alt + SHIFT + c
  • Link: Alt + SHIFT + a
  • Lista não ordenada (ul): Alt + SHIFT + u
  • Lista ordenada (ol): Alt + SHIFT + o
  • Inserir data / hora: Alt + SHIFT + s
  • Inserir URL do IMG: ALT-SHIFT-m
  • Quebra de linha: SHIFT + Enter
  • Item de lista (li): Alt + SHIFT + l
  • Desfazer: CTRL + z
  • Refazer: CTRL + y
  • Leia mais: Alt + SHIFT + t
  • Publique o post: Alt + SHIFT + p
por Lee 18.04.2012 / 20:47