Редактор TinyMCE разбивает мой красивый HTML

Это в значительной степени точный дубликат: Как заставить WordPress и TinyMCE принимать теги <a>, которые обертывают элементы блочного уровня, допустимые в HTML5? и HTML5, WordPress и Tiny MCE – обертывание тега привязки вокруг div приводит к созданию фанки

Моя проблема в том, что предлагаемое решение (фильтр tiny_mce_before_init ), похоже, не решает мою проблему. У меня есть HTML, который выглядит так:

 <a href="#"> <img src="path/to/file.jpg" /> <p>Some amazing descriptive text</p> </a> 

Совершенно законно в HTML5. Однако редактор WP не нравится и преобразует его в:

 <a href="#"> <img src="path/to/file.jpg" /> </a> <p>Some amazing descriptive text</p> 

Это, разумеется, нарушает мой макет. Кто-нибудь знает, как я могу предотвратить такое поведение? Я не могу отказаться от визуального компонента редактора и придерживаться простого текста. Любые предложения приветствуются.

Чтобы быть понятным, когда я использую приведенный ниже код ( предлагается здесь ), теги <p> могут оставаться внутри якорей, но добавляется много дополнительного места вместе с &nbsp; объект, который умножается при каждом переключении между визуальным и текстовым режимами.

 add_filter('tiny_mce_before_init', 'modify_valid_children'); function modify_valid_children($settings){ $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]"; return $settings; } 

Solutions Collecting From Web of "Редактор TinyMCE разбивает мой красивый HTML"

Независимо от того, что вы настроили как допустимые дочерние элементы, WordPress обрабатывает p-теги, а также разрывы строк очень уникальным образом. В конце концов, вы, возможно, заметите, что при переключении с текстового редактора на визуальный редактор и обратно ваши теги <p> будут разделены, как и на интерфейсе. Способ блокировать это происходит путем предоставления <p> тегам настраиваемого класса.

<p class="text">This p tag won't get removed"</p> .

В то время как этот будет держать ваш тэг p от лишения, он не будет исправлять вашу проблему, так как ваша разметка на интерфейсе все равно будет удалена. Вы можете отключить wpautop. Если вы сделаете это и включили p в действительных дочерних элементах , это ПОЛУЧИТ ВАШУ ИССЛЕДУЮЩУЮ .

ВАРИАНТ 1: Отключить авто и установить действительных детей

 remove_filter( 'the_content', 'wpautop' ); add_filter('tiny_mce_before_init', 'modify_valid_children', 99); function modify_valid_children($settings){ $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]"; return $settings; } 

Я должен предупредить вас, хотя второй, который вы переключитесь с HTML- редактора на TinyMCE, ваш HTML будет уничтожен. Обходной путь заключается в том, чтобы полностью отключить TinyMCE для определенных типов сообщений, как в варианте 2 ниже.


ВАРИАНТ 2: Отключить Auto P, TinyMCE и установить действительных детей

 remove_filter( 'the_content', 'wpautop' ); add_filter('tiny_mce_before_init', 'modify_valid_children', 99); function modify_valid_children($settings){ $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]"; return $settings; } add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup'); function disable_wyswyg_to_preserve_my_markup( $default ){ if( get_post_type() === 'post') return false; return $default; } 

Для большинства людей, хотя это не вариант.


Итак, какие еще варианты есть? Один из обходных решений, который я заметил, – это использовать тег span с классом и убедиться, что между вашими тэгами html нет пробелов . Если вы сделаете это, вы можете использовать опцию один выше и избегать отключения TinyMCE вместе. Просто помните, что вам также нужно добавить CSS-код в таблицу стилей, чтобы отобразить диапазон правильно.

ВАРИАНТ 3: Вариант 1 + Стилированные теги Span

HTML

 <a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Some amazing descriptive text</span></a> 

CSS в таблице стилей

 .noautop { display: block; } 

Вариант 4: Использовать встроенный shortcode загрузчика мультимедиа

загрузчик мультимедиа короткого кода

Я начал забывать об этом, но короткий заголовок [caption] будет выглядеть так:

 [caption id="attachment_167" align="alignnone" width="169"] <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" /> awesome caption [/caption] 

Результат будет выглядеть так:

 <figure id="attachment_167" style="width: 169px" class="wp-caption alignnone"> <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" /> <figcaption class="wp-caption-text">Some amazing descriptive text</figcaption> </figure> 

Если вы не хотите, чтобы фигурные метки могли использовать плагин, например, специальный код для коротких сообщений, который позволяет вам сделать это:

 [raw] <p>this content will not get filtered by wordpress</p> [/raw] 

Почему редактор не может работать, как я хочу?

Я провел бесчисленные часы, пытаясь заставить это работать хорошо за последние пару лет. Иногда я придумываю решение, которое отлично работает, но затем WordPress будет вызывать обновление, которое все испортит. Единственное решение, которое я когда-либо нашел, чтобы полностью работать, как это должно, приводит меня к лучшему ответу, который у меня есть.

Вариант 5: Сохраненный редактор HTML Markup Plus

Так что спаси себе головную боль и просто иди с этим. По умолчанию сохраненный редактор HTML Markup Plus влияет только на новые страницы. Если вы хотите изменить уже созданные страницы, вам нужно перейти на http://www.example.com/wp-admin/options-writing.php и отредактировать настройки плагина. Вы также сможете изменить поведение новой строки по умолчанию.

Примечание. Если вы решите использовать это, убедитесь, что вы проверяете поток поддержки при запуске нового обновления WordPress. Иногда изменение может повредить вещи, поэтому лучше всего следить за тем, чтобы плагин работал с более новыми версиями.


Дополнительный кредит: отладка вашей проблемы / редактирование других параметров Tinymce

Если вы хотите проверить и легко редактировать свои настройки TINYMCE вручную, как и с фильтрами, вы можете установить расширенную конфигурацию tinymce . Он позволяет просматривать ВСЕ настроенные параметры TINYMCE и редактировать их с помощью простого интерфейса. Вы также можете добавлять новые параметры так же, как и с фильтрами. Это делает вещи намного легче понять.

Например, у меня есть и тот, и сохраненный редактор HTML Markup Plus. Снимок экрана приведен на странице администрирования Advanced Tinymce Config. В то время как скриншот обрезает 90% того, что на самом деле есть, вы можете видеть, что он показывает действительные дети, доступные для редактирования, и какие сохраненные HTML Editor Markup Plus добавлены.

редактор tinymce

Это чрезвычайно полезный способ не только полностью настроить ваш редактор, но и увидеть, что происходит. Возможно, вы даже сможете выяснить, что вызвало вашу проблему. Просмотрев параметры самостоятельно, в то время как Сохраненный Редактор HTML Editor был включен, я видел некоторые дополнительные параметры, которые можно было бы добавить к настраиваемому фильтру.

 function fix_tiny_mce_before_init( $in ) { // You can actually debug this without actually needing Advanced Tinymce Config enabled: // print_r( $in ); // exit(); $in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]"; $in[ 'force_p_newlines' ] = FALSE; $in[ 'remove_linebreaks' ] = FALSE; $in[ 'force_br_newlines' ] = FALSE; $in[ 'remove_trailing_nbsp' ] = FALSE; $in[ 'apply_source_formatting' ] = FALSE; $in[ 'convert_newlines_to_brs' ] = FALSE; $in[ 'verify_html' ] = FALSE; $in[ 'remove_redundant_brs' ] = FALSE; $in[ 'validate_children' ] = FALSE; $in[ 'forced_root_block' ]= FALSE; return $in; } add_filter( 'tiny_mce_before_init', 'fix_tiny_mce_before_init' ); 

К сожалению, этот метод не сработал. Вероятно, существует некоторое регулярное выражение или javascript, которые происходят при обновлении сообщения и / или переключении между редакторами. Если вы посмотрите на исходный код сохраненного HTML-редактора, вы увидите, что он работает над javascript на стороне администратора, поэтому мой последний совет – проверить, как работает плагин, если вы хотите добавить эту функциональность в свою тему.

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