HTML hộp thoại đến từ WP_Editors::wp_link_dialog()nhưng không có móc trong đó.
Thay vào đó, chúng ta có thể sử dụng jQuery để nối HTML tùy chỉnh vào hộp thoại liên kết và cố gắng ghi đè, ví dụ: wpLink.getAttrs()vì nó rất ngắn ;-)
Ví dụ 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' : ''
};
}
});
Tôi vừa làm một thử nghiệm nhanh và nó có vẻ hoạt động nhưng cần thử nghiệm và điều chỉnh thêm khi cập nhật liên kết. Đây là một bản hack cũ mà tôi đã làm có thể cần làm mới.
Cập nhật
Có vẻ như bạn muốn thêm rel="nofollow"tùy chọn vào hộp thoại liên kết, vì vậy hãy cập nhật phương pháp trên cho trường hợp đó:
Chúng tôi thêm relthuộc tính liên kết với:
/**
* 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' : ''
};
}
Nếu relthuộc tính trống, thì nó sẽ tự động bị xóa khỏi liên kết trong trình chỉnh sửa.
Sau đó, chúng ta có thể nối vào wplink-opensự kiện kích hoạt khi hộp thoại liên kết được mở. Tại đây, chúng tôi có thể đưa HTML tùy chỉnh của mình và cập nhật nó theo lựa chọn liên kết hiện tại:
$(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 );
}
});
nơi chúng tôi sử dụng chức năng trợ giúp sau, dựa trên getLink()chức năng cốt lõi, để lấy HTML của liên kết đã chọn:
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;
}
Đây là đầu ra:
với HTML sau:
ps: Điều này có thể được kiểm tra thêm và cũng có thể được mở rộng để hỗ trợ dịch
