HTML-код диалога WP_Editors::wp_link_dialog()
но никаких зацепок там нет.
Вместо этого мы могли бы использовать jQuery, чтобы добавить пользовательский HTML-код в диалог ссылок и попытаться переопределить, например, wpLink.getAttrs()
, потому что он очень короткий ;-)
Демо-пример:
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' : ''
};
}
});
Я только что сделал быстрый тест, и это похоже на работу, но нуждается в дополнительном тестировании и настройках при обновлении ссылок. Вот старый взлом, который я сделал, который может потребовать обновления.
Обновить
Похоже, вы хотите добавить rel="nofollow"
опцию в диалог ссылок, поэтому давайте обновим описанный выше подход для этого случая:
Мы добавляем rel
атрибут ссылки с:
/**
* 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' : ''
};
}
Если rel
атрибут пуст, он будет автоматически удален из ссылки в редакторе.
Затем мы можем подключиться к wplink-open
событию, которое срабатывает при открытии диалога ссылок. Здесь мы можем внедрить наш собственный HTML и обновить его в соответствии с текущим выбором ссылки:
$(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 );
}
});
где мы используем следующую вспомогательную функцию, основанную на getLink()
основной функции, чтобы получить HTML-код выбранной ссылки:
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;
}
Вот вывод:
со следующим HTML:
PS: это может быть проверено в дальнейшем, а также может быть расширен для поддержки переводов
href
если пользователь не откроет диалоговое окно , но только с помощью самого первого всплывающего окна , которое имеет заполнитель:Paste URL or type to search
?mce_external_plugins
фильтр, чтобы загрузить файл сценария илиafter_wp_tiny_mce
ловушку, чтобы вставить фрагмент (с частью добавления в виде одной строки), чтобы проверить это.getAttrs
Метод здесь только переопределить значение из диалогового окна Настройки, а я не смотрел в то, как переопределить значение из входного инлайн. Может быть, переопределитьwp_link_apply
команду, если это возможно? Я думаю, что это может быть хороший новый вопрос ;-) @ Dan9tinymce.ui.Control.extend.setUrl
в плагинеwp-includes/js/tinymce/plugins/wplink/plugin.js
.Глядя на ядро, нет никаких следов каких-либо фильтров или действий в
wp_link_dialog
, которые могли бы сделать вашу жизнь проще ...Изучая, как другие решили эту проблему, есть плагин, который делает примерно так же, как вы хотите. По сути, он отменяет регистрацию файла wplink.js
wp_deregister_script('wplink');
и снова регистрирует измененную версию файла, на этот раз включая нужное дополнительное поле.Хотя я не думаю, что это лучший метод (учитывая возможные последующие конфликты при обновлении WordPress), я думаю, что его проще всего получить.
Надеюсь, это поможет!
источник