Когда я использую редактор WordPress HTML, чтобы добавить значки icomoon, как это:
<span class="icon-shield"></span>
и затем переключитесь на визуальный редактор и затем вернитесь в редактор HTML, значки исчезнут. Я пытаюсь включить этот бит Javascript, чтобы исправить это. Я посмотрел на wp_enqueue_scripts и поместил это в functions.php, но это все еще не решает проблему.
function oakwood_tinymcefix() {
wp_enqueue_script( 'tiny_mce' );
echo '<script type="text/javascript">'
, 'tinymce.init({
...
extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
});'
, '</script>';
}
add_action( 'admin_enqueue_scripts', 'oakwood_tinymcefix' );
Как я могу это исправить?
php
javascript
tinymce
visual-editor
html-editor
mcography
источник
источник
...
не являются допустимым Javascript и часто используются, чтобы указать на упущение контента. В этом случае, я полагаю, автор документа предназначен для вас, чтобы предоставить свою собственную конфигурацию TinyMCE, где присутствует многоточие. Кроме того, вы использовали значение по умолчанию из документов, которое явно заявляет, что оно заменяетimg
правило TinyMCE - это ничего неspan
решает для вашей проблемы. У вас больше шансов получить достоверный ответ, если приложить больше усилий для исследования - пожалуйста, уделите больше времени документам TinyMCE.valid_elements
опциям должна помочь вам понять, что вы должны передаватьextended_valid_elements
опциону. Я не читал документы, но, вероятно, это будет выглядеть примерно так:"span[class|id|title|style]"
Ответы:
Фон
Эта проблема связана с удалением пустых
<span></span>
элементов в TinyMCE при сохранении сообщения или переключении между вкладками редактораVisual
иText
. Проблема присуща основной функциональности (начиная с версии магистрали4.0-alpha-20140602
) и не может быть изменена через стандартные API WordPress, как упомянуто в билете № 26986 . Билет содержит подробное описание причин настройки и помечен какwont-fix
, означающий, что ваша лучшая ставка - один из «обходных путей», перечисленных ниже.Поведение WordPress / TinyMCE по умолчанию
По умолчанию экземпляр WordPress TinyMCE настроен таким образом, что ряд пустых тегов или тегов, в которых отсутствуют определенные атрибуты, удаляются в попытке устранить разметку, которая ничего не делает.
Из документов MDN
<span>
:Как
<span>
и предполагалось, для группировки встроенных элементов / содержимого основные участники WordPress решили, что элемент должен быть неактуальным, когда тег пуст, и, таким образом, убрать его из содержимого.Обходные
По большей части, правильный способ изменить конфигурацию TinyMCE - подключиться
tiny_mce_before_init
к фильтру, однакоspan
поведение удаления пустого не может быть изменено таким образом. Для этого, скорее всего, требуются хаки для основных файлов, и поэтому я не предоставил таких решений для рассмотрения.Идеально: дать
<span>
текст для чтения с экранаПрограммы чтения с экрана - это части программного обеспечения, которые пытаются интерпретировать экранный контент, чтобы помочь слабовидящим. При обработке веб-страницы большинство программ чтения с экрана либо полностью отключают CSS (и Javascript), либо обрабатывают только подмножество, так что вещи, обычно скрытые с помощью CSS, будут обрабатываться так, как если бы они были видимы. Web-разработчики традиционно используют это поведение во имя доступности, создавая класс CSS, который можно применять к элементам, которые будут скрывать их от всех, у кого включен CSS, что-то вроде :
Когда этот класс доступен (таблицы стилей вашей темы, вероятно, имеют аналогичный класс), в пределах вашего диапазона значков вы можете добавить второй диапазон «screen-reader», который не будет (или, по крайней мере, будет казаться) отображаться на экране, но предоставит программам чтения с экрана доступную альтернативу вашей иконке, аналогично тому, как
alt
работает атрибут<img>
:Выше будет отображаться ваш значок, когда CSS включен, и программы чтения с экрана будут интерпретировать «Безопасность» на своем месте.
Предоставить
<span>
невидимый контентЧтобы исключить возможность
<span>
удаления s, вы можете добавить контент, который явно не отображается:Добавление пробела между открывающим и закрывающим тегом будет достаточно. Однако, поскольку пустые пробелы удалены, вам нужно добавить символ через
HTML-сущность. Этот символ будет преобразован в обычный пробел после переключения вкладок или сохранения, однако он не будет удален из разметки. Обратите внимание, что это может повлиять на размер вашего диапазона, так же, как если бы вы поместили одну букву в элемент:<span class="icon-shield"> </span>
Предполагая, что вы работаете с набором символов UTF-8, вы можете использовать символ "мягкого дефиса" через сущность HTML
­
. В отличие от этого
, мягко-гиперный символ отображается так, как будто он не занимает места и не должен влиять на размер вашего диапазона:<span class="icon-shield">­</span>
Используйте альтернативный элемент
В то время как WordPress TinyMCE настроен для удаления пустых
<span>
элементов, есть ряд других тегов, которые по умолчанию настроены для разрешения существования без содержимого. В комментариях билет # 26986 , TobiasBg рекомендует использовать<i>
(<em>
,<b>
и<strong>
несколько других возможностей). См. Этот вопрос переполнения стека для получения дополнительной информации о практике использования<i>
значков.Создайте свой собственный экземпляр TinyMCE
Это, пожалуй, самое сложное и в общем абсурдное из доступных решений, и поэтому я не буду предоставлять реализацию. Используя плагин, должна быть возможность загрузить отдельный экземпляр сценариев TinyMCE, настроить их так, как вы пожелаете (помимо параметров, предоставляемых WordPress), и заменить редактор по умолчанию (или скрыть его и добавить метабокс замены). Позволяя вам отключить удаление пустых диапазонов, количество времени, необходимое для уточнения такой реализации, вероятно, значительно перевесит выгоду.
источник
i
элемент, вплоть до самого простого,<i></i>
был сохранен в ходе создания нового поста и последующей модификации - ни один из них не был удален из содержимого. Также я не могу определить такое поведение в основной кодовой базе. Не могли бы вы предоставить пример использования WordPress для удаления пустыхi
элементов?<span class="icon-shield"><!-- icon --></span>
. Это не занимает места, как это
делает, и не позволяет TinyMCE удалить элемент.