Как заставить TinyMCE в WordPress заменять переносы строк на теги <br> вместо <p> </p>

10 окт. 2013 г., 19:35:46
Просмотры: 15.6K
Голосов: 7

Редактор TinyMCE вставляет <p>&nbsp;</p> вместо тегов <br>, когда я нажимаю Enter для переноса строки в тексте.

Как заставить TinyMCE в WordPress заменять переносы строк на <br>, а не на <p>&nbsp;</p>?

10
Комментарии

используйте мягкие переносы (shift+enter) для вставки <br> вместо абзацев.

Milo Milo
10 окт. 2013 г. 20:00:49

@Спасибо, но к сожалению, это не вариант в моем случае. Мне нужно делать это нажатием Enter. Думаю, нужно изменить какие-то настройки TinyMCE или WordPress. Вы знаете какие?

Derfder Derfder
10 окт. 2013 г. 20:09:44

В WordPress нет такой опции, используйте мягкий перенос

Eugene Manuilov Eugene Manuilov
10 окт. 2013 г. 20:23:10

@EugeneManuilov Я не верю, что в TinyMCE или WP это невозможно настроить. Должен быть способ это сделать.

Derfder Derfder
11 окт. 2013 г. 10:19:11

@Milo Мой клиент даже не знает, что такое мягкий перенос. И уж точно он не хочет каждый раз нажимать shift + enter, когда ему нужно сделать новую строку. Если это возможно в Drupal и Joomla, значит должно быть возможно и в WordPress.

Derfder Derfder
11 окт. 2013 г. 10:20:43

@EugeneManuilov Если это не проблема WordPress, то как я могу это сделать в TinyMCE? Какой файл в WP нужно отредактировать?

Derfder Derfder
11 окт. 2013 г. 10:22:17

@EugeneManuilov Я пробовал эту функцию change_mce_options($init){ $init["forced_root_block"] = false; $init["force_br_newlines"] = true; $init["force_p_newlines"] = false; $init["convert_newlines_to_brs"] = true; return $init; } add_filter('tiny_mce_before_init','change_mce_options'); Но она добавляет br внутри тегов <p> вроде <p><br></p>. А мне нужно <p></p><br>. Есть идеи как исправить текущее решение для этого?

Derfder Derfder
11 окт. 2013 г. 18:32:01

@Milo Ещё одна проблема в том, что этот код: change_mce_options($init){ $init["forced_root_block"] = false; $init["force_br_newlines"] = true; $init["force_p_newlines"] = false; $init["convert_newlines_to_brs"] = true; return $init; } add_filter('tiny_mce_before_init','change_mce_options'); не сохраняет теги <br>. Они удаляются после сохранения в WordPress.

Derfder Derfder
11 окт. 2013 г. 18:33:12

Не знаю, можно ли (и стоит ли вообще пытаться) переопределить enter на shift+enter во время события keydown в textarea с помощью jQuery? Просто мысль.

birgire birgire
14 окт. 2013 г. 20:23:31

@birgire Опять же, это работает в Drupal, значит должно работать и в WordPress. Мне просто нужно настроить TinyMCE в WordPress и отключить некоторые фильтры в WP и т.д.

Derfder Derfder
14 окт. 2013 г. 20:52:25
Показать остальные 5 комментариев
Все ответы на вопрос 6
1
12

Ответ, предложенный GavinR, верен.

Однако вам не нужно устанавливать предложенный плагин. Просто добавьте этот мини-плагин, и всё готово:

<?php
defined( 'ABSPATH' ) OR exit;
/* Plugin Name: TinyMCE - перенос строки вместо параграфа */
function mytheme_tinymce_settings( $tinymce_init_settings ) {
    $tinymce_init_settings['forced_root_block'] = false;
    return $tinymce_init_settings;
}
add_filter( 'tiny_mce_before_init', 'mytheme_tinymce_settings' );

Теперь при нажатии Enter будет вставляться тег <br> вместо создания нового параграфа. Но учтите, если вы создадите два последовательных переноса строки, текст всё равно будет разделён на параграфы из-за фильтра wpautop, применяемого к содержимому вашей записи. Сначала вам нужно удалить этот фильтр и создать новый фильтр, который заменит все переносы строк тегами <br>. Добавьте что-то вроде этого в ваш functions.php, чтобы теги <br> отображались в вашем шаблоне:

remove_filter ( 'the_content', 'wpautop' );
add_filter ( 'the_content', 'add_newlines_to_post_content' );
function add_newlines_to_post_content( $content ) {
    return nl2br( $content );
}
17 окт. 2013 г. 13:53:24
Комментарии

Я бы предложил добавить это в плагин, а не в тему, чтобы при смене темы ваш редактор продолжал использовать этот метод.

Morgan Estes Morgan Estes
17 окт. 2013 г. 17:52:01
1

Установите этот плагин: http://wordpress.org/plugins/advanced-tinymce-configuration/

и затем установите параметр forced_root_block в значение FALSE.

15 окт. 2013 г. 06:52:13
Комментарии

Это не работает, по-прежнему выводится <p>&nbsp;</p> вместо <br> в моих текстовых областях с редактором TinyMCE.

Derfder Derfder
15 окт. 2013 г. 13:37:02
0

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

  1. Установите плагин Advanced Custom Fields.
  2. Создайте произвольное поле для вашего текста и выберите тип поля "textarea" с настройкой форматирования "преобразовывать переносы строк в теги <br />".
  3. Настройте "местоположение" этого произвольного поля так, чтобы оно отображалось только для нужного типа записи или шаблона (при необходимости это поле может заменить стандартный редактор для данного типа записи или шаблона).

Очевидно, что такой подход лишает всех стандартных возможностей форматирования, которые обычно предоставляет TinyMCE, включая создание ссылок и вставку медиафайлов. Поэтому такой вариант может вам не подойти.

15 окт. 2013 г. 00:57:43
1

Насколько мне известно... единственный способ сделать это - удалить фильтр wpautop.

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

Это точно предотвращает добавление WordPress'ом 'искусственных' тегов p.

Я полагаю, что поскольку WordPress в некоторой степени разработан для "обычных пользователей"... они считают необходимым включить фильтр wpautop, который обрабатывает контент после его отправки (или переключения между визуальным и текстовым режимами); выполняя серию "проверок" на валидность HTML... и корректируя контент соответствующим образом.

Хотя это может быть отлично для людей, которые никогда не касаются HTML-стороны, это становится головной болью для многих пользователей, пытающихся "возиться" с HTML.

ПРИМЕЧАНИЕ: Удаление фильтра wpautop приведёт к тому, что все ваши записи/страницы (старые и новые) не будут использовать этот фильтр. В результате весь ваш HTML в редакторе контента будет "слипшимся". Визуальная сторона будет выглядеть нормально... но текстовая сторона будет слипшейся... что затруднит модификацию кода.

17 окт. 2013 г. 16:08:43
Комментарии

Я использовал Advance Custom Fields, поэтому мне понадобилось remove_filter ('acf_the_content', 'wpautop');, но оно всё равно обернуло весь ввод в один абзац как корневой блок.

TecBrat TecBrat
30 сент. 2016 г. 20:27:24
0

Если вы хотите сделать отступ в начале предложения после <br> (SHIFT+ENTER), возможно, вам понадобится кастомное решение:

В functions.php добавьте:

add_action('init', 'add_cust_button');
function add_cust_button() {
   if ( get_user_option('rich_editing') == 'true') {
     add_filter('mce_external_plugins', 'add_mycust_plugin');
     add_filter('mce_buttons_2', 'register_mycust_plugin');
   }
}
    function register_mycust_plugin($buttons) {
       array_push($buttons, "|", "indent_button");
       return $buttons;
    }
    function add_mycust_plugin($plugin_array) {
       $plugin_array['my_custom_button'] = get_bloginfo('template_url').'/scripts/button.js';
       return $plugin_array;
    }

add_filter( 'tiny_mce_version', 'my_refresh_mce');
function my_refresh_mce($ver) {
  $ver += 3;
  return $ver;
}

Затем в папке темы создайте папку "scripts", а внутри неё файл с иконкой (назовите "indent_img.png") и JavaScript файл (назовите "button.js") с таким содержимым:

(function() {
    tinymce.create('tinymce.plugins.Nlineeplg', {
        init : function(ed, url) {

            ed.addButton('indent_button', {
                title : 'indent',
                image : url+'/indent_img.png',
                onclick : function() {
                    ed.execCommand('mceInsertContent', false, '<span style="margin:0 0 0 8px;">&nbsp;</span>');
                }
            });

        },
        createControl : function(n, cm) {
            return null;
        }
    });
    tinymce.PluginManager.add('my_custom_button', tinymce.plugins.Nlineeplg);
})();

После этого на странице РЕДАКТОРА появится специальная кнопка, и когда вы кликнете в начале предложения и нажмёте эту кнопку, будет добавлен отступ.

26 мар. 2014 г. 23:27:26
4

Благодаря Bigsmoke стало возможно работать с wpautop:
A - Включение или отключение wpautop на выбранных страницах
B - Без изменения function.php
C - Без проблем со старыми страницами, если фильтр Wpautop был удален
D - Без искажения содержимого в текстовой части редактора

http://wordpress.org/plugins/wpautop-control/

Теперь я могу удобно форматировать большую часть текста с автоматическими абзацами, а затем завершать оформление без необходимости постоянно включать/выключать wpautop.

11 авг. 2014 г. 16:03:45
Комментарии

Отключение автоформатирования для этого, вероятно, плохая идея, так как это вносит гораздо больше изменений в обработку содержимого редактора, и большинство этих изменений, скорее всего, пользователь все равно хотел бы сохранить

Mark Kaplun Mark Kaplun
11 авг. 2014 г. 16:30:14

Ты прав. Но поскольку WordPress принудительно заменяет br/ на  , это просто кошмар, когда пытаешься, например, точно выровнять текст рядом с изображением.

Если у тебя есть более чистое решение для этого, я был бы рад его использовать.

bradypus bradypus
11 авг. 2014 г. 16:48:48

Попробуй задать вопрос об этом ;)

Mark Kaplun Mark Kaplun
11 авг. 2014 г. 17:08:07