Визуальный редактор Wordpress

8

Когда я использую редактор 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' );

Как я могу это исправить?

mcography
источник
Для начала, эллипсы ...не являются допустимым Javascript и часто используются, чтобы указать на упущение контента. В этом случае, я полагаю, автор документа предназначен для вас, чтобы предоставить свою собственную конфигурацию TinyMCE, где присутствует многоточие. Кроме того, вы использовали значение по умолчанию из документов, которое явно заявляет, что оно заменяет imgправило TinyMCE - это ничего не spanрешает для вашей проблемы. У вас больше шансов получить достоверный ответ, если приложить больше усилий для исследования - пожалуйста, уделите больше времени документам TinyMCE.
Боско
В частности, документация по valid_elementsопциям должна помочь вам понять, что вы должны передавать extended_valid_elementsопциону. Я не читал документы, но, вероятно, это будет выглядеть примерно так:"span[class|id|title|style]"
Bosco
Спасибо. Я не знаю Javascript, поэтому я просто предположил, что фрагмент будет работать. Виноват.
Макография
1
Без обид, но вы действительно не должны использовать код, который вы не понимаете. Это мечта хакера, не так ли? Заставьте пользователя установить код (который просто является вредоносным).
s_ha_dum
После некоторых исследований эта проблема оказалась несколько более сложной, чем я первоначально думал. Я добавлю свои выводы и любые обходные пути / решения позже сегодня. В сторону: @s_ha_dum поднимает очень верную точку зрения. Если вы планируете потратить некоторое время на работу над настройкой / разработкой для / для WordPress в любом качестве, вам следует потратить некоторое время на ознакомление с его основополагающими технологиями - даже базовое понимание может во многом помочь вам в устранении неполадок и задании хороших вопросов, не говоря уже о сохранности вашего сайта.
Боско

Ответы:

8

Фон

Эта проблема связана с удалением пустых <span></span>элементов в TinyMCE при сохранении сообщения или переключении между вкладками редактора Visualи Text. Проблема присуща основной функциональности (начиная с версии магистрали 4.0-alpha-20140602) и не может быть изменена через стандартные API WordPress, как упомянуто в билете № 26986 . Билет содержит подробное описание причин настройки и помечен как wont-fix, означающий, что ваша лучшая ставка - один из «обходных путей», перечисленных ниже.

Поведение WordPress / TinyMCE по умолчанию

По умолчанию экземпляр WordPress TinyMCE настроен таким образом, что ряд пустых тегов или тегов, в которых отсутствуют определенные атрибуты, удаляются в попытке устранить разметку, которая ничего не делает.

Из документов MDN<span> :

Элемент HTML является общим встроенным контейнером для фразования контента, который по своей сути ничего не представляет. Его можно использовать для группировки элементов в целях стилизации (с использованием атрибутов class или id) или потому, что они имеют общие значения атрибутов, например lang. Его следует использовать только в том случае, если другой семантический элемент не подходит.

Как <span>и предполагалось, для группировки встроенных элементов / содержимого основные участники WordPress решили, что элемент должен быть неактуальным, когда тег пуст, и, таким образом, убрать его из содержимого.


Обходные

По большей части, правильный способ изменить конфигурацию TinyMCE - подключиться tiny_mce_before_initк фильтру, однако spanповедение удаления пустого не может быть изменено таким образом. Для этого, скорее всего, требуются хаки для основных файлов, и поэтому я не предоставил таких решений для рассмотрения.

Идеально: дать <span>текст для чтения с экрана

Программы чтения с экрана - это части программного обеспечения, которые пытаются интерпретировать экранный контент, чтобы помочь слабовидящим. При обработке веб-страницы большинство программ чтения с экрана либо полностью отключают CSS (и Javascript), либо обрабатывают только подмножество, так что вещи, обычно скрытые с помощью CSS, будут обрабатываться так, как если бы они были видимы. Web-разработчики традиционно используют это поведение во имя доступности, создавая класс CSS, который можно применять к элементам, которые будут скрывать их от всех, у кого включен CSS, что-то вроде :

.screen-reader-text {
    position: absolute !important;
    height: 1px;
    width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Когда этот класс доступен (таблицы стилей вашей темы, вероятно, имеют аналогичный класс), в пределах вашего диапазона значков вы можете добавить второй диапазон «screen-reader», который не будет (или, по крайней мере, будет казаться) отображаться на экране, но предоставит программам чтения с экрана доступную альтернативу вашей иконке, аналогично тому, как altработает атрибут <img>:

<span class="icon-shield"><span class="screen-reader-text">Security</span></span>

Выше будет отображаться ваш значок, когда CSS включен, и программы чтения с экрана будут интерпретировать «Безопасность» на своем месте.

Предоставить <span>невидимый контент

Чтобы исключить возможность <span>удаления s, вы можете добавить контент, который явно не отображается:

  • Добавление пробела между открывающим и закрывающим тегом будет достаточно. Однако, поскольку пустые пробелы удалены, вам нужно добавить символ через &nbsp;HTML-сущность. Этот символ будет преобразован в обычный пробел после переключения вкладок или сохранения, однако он не будет удален из разметки. Обратите внимание, что это может повлиять на размер вашего диапазона, так же, как если бы вы поместили одну букву в элемент:

    <span class="icon-shield">&nbsp;</span>

  • Предполагая, что вы работаете с набором символов UTF-8, вы можете использовать символ "мягкого дефиса" через сущность HTML &shy;. В отличие от этого &nbsp;, мягко-гиперный символ отображается так, как будто он не занимает места и не должен влиять на размер вашего диапазона:

    <span class="icon-shield">&shy;</span>

Используйте альтернативный элемент

В то время как WordPress TinyMCE настроен для удаления пустых <span>элементов, есть ряд других тегов, которые по умолчанию настроены для разрешения существования без содержимого. В комментариях билет # 26986 , TobiasBg рекомендует использовать<i> ( <em>, <b>и <strong>несколько других возможностей). См. Этот вопрос переполнения стека для получения дополнительной информации о практике использования <i>значков.

<i class="icon-shield"></i>

Создайте свой собственный экземпляр TinyMCE

Это, пожалуй, самое сложное и в общем абсурдное из доступных решений, и поэтому я не буду предоставлять реализацию. Используя плагин, должна быть возможность загрузить отдельный экземпляр сценариев TinyMCE, настроить их так, как вы пожелаете (помимо параметров, предоставляемых WordPress), и заменить редактор по умолчанию (или скрыть его и добавить метабокс замены). Позволяя вам отключить удаление пустых диапазонов, количество времени, необходимое для уточнения такой реализации, вероятно, значительно перевесит выгоду.

Bosco
источник
Спасибо миллион, @boscho! Я действительно ценю, что вы нашли время, чтобы помочь мне. Я должен подписать сейчас, но я собираюсь рассмотреть ваши предложения позже сегодня вечером.
Макография
<i> элементы также удаляются. Кажется, что только не раздеты.
Эерман
@EHerman Я только что провел несколько экспериментов, и каждый пустой iэлемент, вплоть до самого простого, <i></i>был сохранен в ходе создания нового поста и последующей модификации - ни один из них не был удален из содержимого. Также я не могу определить такое поведение в основной кодовой базе. Не могли бы вы предоставить пример использования WordPress для удаления пустых iэлементов?
Боско
Другой способ обойти это - создать шорткод, который вставляет значок в контент. Что-то вроде [icon class = shield]. Это делает значок также редактируемым при использовании визуального редактора.
HU ist Sebastian
1
Другая альтернатива - поместить HTML-комментарий в элемент span, например <span class="icon-shield"><!-- icon --></span>. Это не занимает места, как это &nbsp;делает, и не позволяет TinyMCE удалить элемент.
j08691