FCKeditor оборачивает определенные элементы HTML5 тегами <p>- вызывая проблемы для старых браузеров - PullRequest
Новая
       20

FCKeditor оборачивает определенные элементы HTML5 тегами <p>- вызывая проблемы для старых браузеров

3 голосов
/ 09 января 2012

Я вынужден использовать WYSIWYG-редактор в CMS, на которой публикуется наш веб-сайт, и поведение по умолчанию для пробелов - пустые <p></p> теги (это ожидается). 

FCKeditor.prototype.Version         = '2.6' ;
FCKeditor.prototype.VersionBuild    = '18638' ;

Это нормально, но большая проблема в том, что редактор, похоже, не распознает элементы HTML5 как независимые, блочные элементы и заключает в себе <section>, <aside> и другие теги HTML5 внутри <p>...</p> контейнеров!

DOCTYPE, используемые страницами CMS, - «XHTML Transitional», и я не могу это контролировать. Однако я объявил в своем пользовательском CSS, что все элементы HTML5, которые я использую, должны отображаться как блочные элементы, и я даже включил вспомогательный скрипт HTML5shiv.js, чтобы расширить поддержку этих элементов для старых браузеров.

Например: 

This is a paragraph. <!-- using SHIFT+ENTER in the WYSIWYG -->
This should be a new line in the paragraph. <!-- using ENTER in the WYSIWYG -->


<section>
    <article>Some block text</article>
</section>

становится: 

<p>This is a paragraph.<br/> <!-- using SHIFT+ENTER in the WYSIWYG -->
This should be a new line in the paragraph.</p>
<p></p>
<p></p>
<p><section><article>Some block text</article></section></p>

как только нажата кнопка Сохранить.

Прежде всего, что будут делать современные и старые браузеры, когда они увидят <section> внутри тега <p>? Как они настраивают DOM для этой ситуации? Я исследовал окончательный вариант DOM на странице для всех современных браузеров, включая IE9 +, и они, похоже, игнорируют ошибочные теги контейнера <p>...</p> и / или закрывают их до анализа элементов HTML5.

Однако при просмотре в браузере Android Mobile 2.1 (только 2.1) и IE7 и более ранних версиях поведение повсеместно.

Зная, что:

  1. Я не имею право изменять файлы FCKeditor, как В этом посте объясняется .
  2. Я не имею доступ к настройке редактора WYSIWYG, который использует CMS, и не обновляет его
  3. Я могу запускать только <script type="text/javascript"> скрипты, нет PHP разрешено .

Как решить эту проблему для тех старых браузеров, у которых возникают проблемы?

Ответы [ 2 ]

0 голосов
/ 04 ноября 2013

В конце концов, я решил просто «сгладить» материал, используя 'display: inline !important' любые <p> элементы , а не внутри <article> элементов.Легкий выход, я полагаю!

0 голосов
/ 03 ноября 2013

Старые браузеры будут обрабатывать элементы HTML5 как встроенный элемент с DOM: 

<p>
  <section>...</section>
</p>

Современные браузеры разделяют теги <p> на две секции, в результате чего получается DOM: 

<p></p>
<section>...</section>
<p></p>

Имея это в виду, вы можете определить, является ли родительский элемент section p, если не удалить лишнее <p>. http://jsfiddle.net/kJzSs/1/

var sections=document.getElementsByTagName('section');
for(var i=0;i<sections.length;i++){
   if(sections[i].parentNode.localName!='p'){
      sections[i].previousElementSibling.remove();
      sections[i].nextElementSibling.remove();
   }
}

чтобы быть немного более осторожным, может быть полезно добавить проверку перед удалением братьев и сестер, что-то вроде: 

if(sections[i].previousElementSibling.localName=='p')

if(sections[i].previousElementSibling.textContent=='')
...