TinyMCE 4 удаление/добавление атрибутов для всех изображений

Вопрос или проблема

function toArray (collection) {
    return Array.prototype.slice.call(collection);
}

var imgs = toArray(document.querySelectorAll('#tiny-mce-4 img'));


imgs.forEach(function(img){
    img.setAttribute('style', img.getAttribute('style').replace(/((height:).*?(px;))/g, 'max-width: 100%;'));
});

<div id="tiny-mce-4">

  <img src="https://wordpress.stackexchange.com/questions/207673/img1" style="height: 500px; width: 800px;" />
  <img src="img2" style="height: 500px; width: 800px;" />
  <img src="img3" style="height: 500px; width: 800px;" />
  <img src="img4" style="width: 800px;" />

</div>

  <img src="img5" style="height: 500px; width: 800px;" />

.

Ответ или решение

Оптимизация атрибутов изображений в TinyMCE 4

Для многих разработчиков и дизайнеров важно правильно адаптировать изображения, загружаемые через редакторы WYSIWYG, такие как TinyMCE 4. В данной статье мы рассмотрим, как эффективно удалить атрибут height из всех изображений и добавить стиль max-width: 100%;. Это необходимая мера для обеспечения адаптивного дизайна и правильного отображения изображений на различных устройствах.

Проблема

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

Решение

Для выполнения поставленных задач, можно воспользоваться следующими шагами:

1. Удаление атрибута height:
   Необходимо найти все изображения в контейнере TinyMCE и удалить указанный атрибут.

2. Добавление стиля max-width: 100%;:
   Этот стиль позволит изображениям адаптироваться к ширине контейнера, не выходя за его пределы.

Скрипт для выполнения задач

Вы можете добавить следующий JavaScript код в свой файл functions.php, чтобы реализовать вышеупомянутые изменения. Предполагается, что ваш элемент TinyMCE имеет id ‘tiny-mce-4’:

function toArray(collection) {
    return Array.prototype.slice.call(collection);
}

var imgs = toArray(document.querySelectorAll('#tiny-mce-4 img'));

imgs.forEach(function(img){
    // Удаляем атрибут height
    img.removeAttribute('height');

    // Здесь мы добавляем/обновляем стиль max-width
    var currentStyle = img.getAttribute('style') || '';
    img.setAttribute('style', currentStyle + 'max-width: 100%;');
});

Пример HTML-кода

<div id="tiny-mce-4">
    <img src="https://wordpress.stackexchange.com/questions/207673/img1" style="height: 500px; width: 800px;" />
    <img src="img2" style="height: 500px; width: 800px;" />
    <img src="img3" style="height: 500px; width: 800px;" />
    <img src="img4" style="width: 800px;" />
</div>
<img src="img5" style="height: 500px; width: 800px;" />

Объяснение кода

• Функция toArray: Конвертирует NodeList (результат querySelectorAll) в обычный массив, что позволяет удобно использовать метод forEach.
• Удаление атрибута height: Метод removeAttribute убирает фиксирование высоты изображений.
• Обновление CSS стиля: Скрипт добавляет стиль max-width: 100%; к текущему стилю изображения, обеспечивая их отзывчивость.

Заключение

Проведение вышеописанных изменений не только улучшит отображение изображений на различных устройствах, но и повысит общее качество пользовательского интерфейса вашего сайта. Использование JavaScript для динамической обработки контента в TinyMCE 4 является эффективным методом, который не требует значительных изменений в структуре HTML. Внедрение данного подхода поможет вам создать более адаптивный и современный веб-контент.