Possível criar imagens de espaço reservado no editor do Wordpress que podem ser clicadas (deve abrir o uploader)?

3

Trabalhando em um projeto no qual eu gostaria de ter botões na área do editor visual real, onde o usuário pode clicar na imagem do espaço reservado e exibir a caixa de diálogo de upload.

Eu vi que as pessoas criam seus próprios botões que adicionam caixas que o usuário deve selecionar com o mouse e clicam no upload de mídia. Para mim, parece que isso está ligado a uma má experiência do usuário. Assim, estou olhando para ver se alguém viu um plugin que faz isso.

Imaginandoquevocêpodeclicarem"inserir imagem aqui" e fazer um diálogo de upload aparecer.

    
por INT 28.01.2013 / 00:02

1 resposta

2
  

essa resposta provavelmente se tornaria impraticável / inutilizável após uma atualização do WordPress, à medida que o TinyMCE fosse atualizado e as APIs mudassem    - por @TomJNowell

Embora eu concorde com o Tom, ainda há uma resposta geral que explica o conceito geral e as partes que não estão se movendo.

O plugin do PHP para definir o conteúdo padrão

Primeiro tem que haver algum conteúdo padrão. E há um filtro para isso:

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

Eventos do TinyMCE JS

Então você simplesmente precisa adicionar um ouvinte de evento. Exemplo da documentação oficial .

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

O objeto wp do WordPress global

Finalmente, você só precisa anexar a ação de diálogo de mídia aberta ao próprio conteúdo. Há o objeto wp , que contém a maior parte do conteúdo principal do WordPress. Basta digitar wp no seu console e você verá que tem acesso global depois que o DOM estiver pronto para o seguinte:

  • Backbone: Object
  • Uploader: function ( options )
  • ajax: Object
  • autosave: Object
  • pulsação: Heartbeat
  • html: Object
  • media: function ( attributes )
  • shortcode: function ( options )
  • template: function

Como você pode ver, há media e Backbone também. Basta inserir wp.media. no seu (por exemplo) console de ferramentas do Chrome dev e você verá a função de preenchimento automático informando o que está disponível. Além disso, Dominik Schilling, o autor da biblioteca de mídia tem um bom conjunto de demos para a biblioteca de mídia do WP no GitHub .

    
por kaiser 12.09.2013 / 03:00