Drupal 7: ckeditor и плагин embed, убираем лишние теги

Суть проблемы в том, что в редакторе Ckeditor для Drupal 7 не корректно работает плагин Embed media, который сразу предлагается в комплекте. Данный плагин позволяет вставлять в свои тексты видео Youtube и других подобных сервисов. Добавляя в текст код (объект embed), он неизбежно выделяется пустыми тегами <p></p>.

Плагин Embed media

Каждая новая строка в редакторе это по умолчанию:

<p></p>

Вставляем в новую строку объект embed, получаем:

<p>
<div>embed</div>
</p>

На этом этапе все замечательно. Но сохраняем страницу и получаем в итоге:

<p>&nbsp;</p>
<div>embed</div>
<p>&nbsp;</p>

То есть никому не нужные отступы, а еще невозможность применить выравнивание для видео.

Например, если попытаться сделать центрирование то, получается вначале это:

<p стиль_центр>
<div>embed</div>
</p>

А потом, при сохранении страницы, и вовсе не рабочий код:

<p стиль_центр>&nbsp;</p>
<div>embed</div>
<p>&nbsp;</p>

Все это, к сожалению, следствие недоработок самого редактора Ckeditor. Попробовал в демке на официальном сайте. Редактор не переваривает, когда внутрь тега <p></p> вставляется <div></div>. Он ведет себя именно так, как показано выше.

Будет ли выпущена новая версия Ckeditor с исправлением? Не знаю. Но своими силами поправить ситуацию можно уже сейчас.

В файле sites\all\modules\ckeditor\plugins\mediaembed\plugin.js поиском ищем все div и заменяем на span.

Теперь при вставке видео на страницу имеем код:

<p>
<span class="media_embed" height="360px" width="480px">
<iframe allowfullscreen="" frameborder="0" height="360px" src="http://www.youtube.com/embed/n1bxT..." width="480px"></iframe>
</span>
</p>

Замечательно работает выравнивание, код получается следующим:

<p стиль_центр>
<span class="media_embed" height="360px" width="480px">
<iframe allowfullscreen="" frameborder="0" height="360px" src="http://www.youtube.com/embed/n1bxT..." width="480px"></iframe>
</span>
</p>

Поскольку <span></span> — это строчный тег, то для него в стилях надо установить display:block. Например, так:

.media_embed { display:inline-block; }

2 Комментария

  1. Это не бага, это фича!© На самом деле CKEditor пытается создавать разметку, следующую стандартам XHTML 1.0, то есть пытается отформатировать введённый код так, чтобы он не содержал «ошибок». Естественно, нужно ли это нам, он не спрашивает. Вредина. Тег <p> — блочный элемент, который может содержать внутри себя только инлайн-элементы типа <strong> или <span>, и не может содержать внутри себя ещё один блочный элемент типа <div> иди второго/третьего/четвёртого по вложенности <p>. Собственно, поэтому ваше исправление и работает, т.к. тег <span> допустим внутри тега <p>. О как (сам узнал буквально только что).

Добавить комментарий