Dialog HTML berasal dari WP_Editors::wp_link_dialog()
tetapi tidak ada kait di sana.
Kami dapat menggunakan jQuery sebagai gantinya untuk menambahkan HTML khusus ke dialog tautan dan mencoba menimpa mis. wpLink.getAttrs()
, Karena sangat pendek ;-)
Contoh demo:
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' : ''
};
}
});
Saya baru saja melakukan tes cepat dan tampaknya berhasil tetapi perlu pengujian dan penyesuaian lebih lanjut saat memperbarui tautan. Ini hack lama yang saya lakukan yang mungkin perlu di-refresh.
Memperbarui
Sepertinya Anda ingin menambahkan rel="nofollow"
opsi ke dialog tautan, jadi mari perbarui pendekatan di atas untuk kasus itu:
Kami menambahkan rel
atribut tautan dengan:
/**
* 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' : ''
};
}
Jika rel
atributnya kosong, maka itu akan secara otomatis dihapus dari tautan di editor.
Lalu kita bisa mengaitkan ke wplink-open
acara yang menyala ketika dialog tautan dibuka. Di sini kita dapat menyuntikkan HTML khusus kami dan memperbaruinya sesuai dengan pilihan tautan saat ini:
$(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 );
}
});
tempat kami menggunakan fungsi pembantu berikut, berdasarkan getLink()
fungsi inti, untuk mendapatkan HTML tautan yang dipilih:
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;
}
Inilah hasilnya:
dengan HTML berikut:
ps: Ini dapat diuji lebih lanjut dan mungkin juga diperluas untuk mendukung terjemahan
href
jika pengguna tidak membuka dialog tetapi hanya menggunakan kotak popup pertama yang memiliki placeholder:Paste URL or type to search
?mce_external_plugins
filter untuk memuat file skrip atauafter_wp_tiny_mce
hook untuk menyuntikkan snippet (dengan bagian append sebagai string baris tunggal), untuk menguji ini. ThegetAttrs
Metode sini hanya akan menimpa nilai dari dialog link pengaturan, saya belum melihat ke bagaimana menimpa nilai dari input inline. Mungkin menggantiwp_link_apply
perintah jika memungkinkan? Saya pikir ini mungkin pertanyaan baru yang bagus ;-) @tinymce.ui.Control.extend.setUrl
pluginwp-includes/js/tinymce/plugins/wplink/plugin.js
.Melihat inti, tidak ada jejak filter atau tindakan apa pun di
wp_link_dialog
fungsi ini, yang akan membuat hidup Anda lebih mudah ...Menyelidiki bagaimana orang lain memecahkan masalah ini, ada sebuah plugin yang melakukan kurang lebih sama seperti yang Anda inginkan. Pada dasarnya itu membatalkan
wp_deregister_script('wplink');
pendaftaran wplink.js, dan mendaftar lagi versi file yang dimodifikasi, kali ini termasuk bidang tambahan yang diinginkan.Meskipun saya tidak berpikir ini adalah metode terbaik (dengan mempertimbangkan kemungkinan konflik berikutnya saat memperbarui WordPress), saya pikir itu adalah cara termudah untuk mendapatkannya.
Semoga ini bisa membantu!
sumber