A caixa de diálogo HTML vem WP_Editors::wp_link_dialog()
mas não há ganchos.
Em vez disso, poderíamos usar o jQuery para anexar o HTML personalizado à caixa de diálogo do link e tentar substituir, por exemplo wpLink.getAttrs()
, o , porque é muito curto ;-)
Exemplo de demonstração:
jQuery( document ).ready( function( $ ) {
$('#link-options').append(
'<div>
<label><span>Link Class</span>
<select name="wpse-link-class" id="wpse_link_class">
<option value="normal">normal</option>
<option value="lightbox">lightbox</option>
</select>
</label>
</div>' );
wpLink.getAttrs = function() {
wpLink.correctURL();
return {
class: $( '#wpse_link_class' ).val(),
href: $.trim( $( '#wp-link-url' ).val() ),
target: $( '#wp-link-target' ).prop( 'checked' ) ? '_blank' : ''
};
}
});
Acabei de fazer um teste rápido e parece funcionar, mas precisa de mais testes e ajustes ao atualizar os links. Aqui está um truque antigo que eu fiz que pode precisar de uma atualização.
Atualizar
Parece que você deseja adicionar a rel="nofollow"
opção à caixa de diálogo do link, então vamos atualizar a abordagem acima para esse caso:
Nós adicionamos o rel
atributo link com:
/**
* Modify link attributes
*/
wpLink.getAttrs = function() {
wpLink.correctURL();
return {
rel: $( '#wpse-rel-no-follow' ).prop( 'checked' ) ? 'nofollow' : '',
href: $.trim( $( '#wp-link-url' ).val() ),
target: $( '#wp-link-target' ).prop( 'checked' ) ? '_blank' : ''
};
}
Se o rel
atributo estiver vazio, ele será automaticamente removido do link no editor.
Em seguida, podemos nos conectar ao wplink-open
evento que é acionado quando a caixa de diálogo do link é aberta. Aqui, podemos injetar nosso HTML personalizado e atualizá-lo de acordo com a seleção de links atual:
$(document).on( 'wplink-open', function( wrap ) {
// Custom HTML added to the link dialog
if( $('#wpse-rel-no-follow').length < 1 )
$('#link-options').append( '<div> <label><span></span> <input type="checkbox" id="wpse-rel-no-follow"/> No Follow Link</label></div>');
// Get the current link selection:
var _node = wpse_getLink();
if( _node ) {
// Fetch the rel attribute
var _rel = $( _node ).attr( 'rel' );
// Update the checkbox
$('#wpse-rel-no-follow').prop( 'checked', 'nofollow' === _rel );
}
});
onde usamos a seguinte função auxiliar, com base na getLink()
função principal, para obter o HTML do link selecionado:
function wpse_getLink() {
var _ed = window.tinymce.get( window.wpActiveEditor );
if ( _ed && ! _ed.isHidden() ) {
return _ed.dom.getParent( _ed.selection.getNode(), 'a[href]' );
}
return null;
}
Aqui está a saída:
com o seguinte HTML:
ps: isso pode ser testado ainda mais e também pode ser estendido para oferecer suporte a traduções
href
se o usuário não abrir a caixa de diálogo, mas apenas usar a primeira caixa pop-up que possui o espaço reservadoPaste URL or type to search
:?mce_external_plugins
filtro para carregar o arquivo de script ou oafter_wp_tiny_mce
gancho para injetar o trecho (com a parte anexada como uma sequência de linhas única), para testar isso. OgetAttrs
método aqui substituirá apenas o valor da caixa de diálogo de configurações do link. Não examinei como substituir o valor da entrada embutida. Talvez substitua owp_link_apply
comando, se possível? Acho que isso pode ser uma boa nova pergunta ;-) @ Dan9tinymce.ui.Control.extend.setUrl
no plug-inwp-includes/js/tinymce/plugins/wplink/plugin.js
.Olhando para o núcleo, não há vestígios de nenhum filtro ou ação na
wp_link_dialog
função, o que tornaria sua vida mais fácil ...Investigando como os outros resolveram esse problema, há um plugin que faz mais ou menos o mesmo que você deseja. Basicamente, ele cancela o registro do wplink.js
wp_deregister_script('wplink');
e registra novamente uma versão modificada do arquivo, desta vez incluindo o campo extra desejado.Embora eu não pense que esse seja o melhor método (levando em consideração possíveis conflitos subseqüentes durante a atualização do WordPress), acho que é o mais fácil de obtê-lo.
Espero que ajude!
fonte