Уменьшите межстрочный интервал в текстовой области TinyMCE

Question

Я использую TinyMCE для предоставления текстового редактора для редактирования текста. Но межстрочный интервал слишком велик. Я добавил скриншот, который показывает межстрочный интервал, который я получаю при нажатии клавиши Enter. Что можно с этим сделать

Answer 1

Вы можете добавить свой CSS в ваш CSS-редактор следующим образом:

tinyMCE.init({
        ...
        editor_css : "/content_css.css"
});

См. Документы здесь: http://www.tinymce.com/wiki.php/Configuration:editor_css

Затем вы можете установить для свойства line-height любую высоту, которую пожелаете в этом файле.

Вы также можете изменить настройку, в которой вы можете переключаться между генерацией тегов абзаца (p) или тега разрыва строки (br) примерно так:

tinyMCE.init({
        ...
        force_br_newlines : true,
        force_p_newlines : false,
        forced_root_block : '' // Needed for 3.x
});

См. Документы здесь для получения дополнительной информации: http://www.tinymce.com/wiki.php/Configuration:force_br_newlines

Я думаю, что TinyMCE делает абзацы стандартными, когда вы нажимаете Enter, поэтому вы получаете большую разницу между строками. Вы также можете использовать shift + enter как в Word, чтобы получить новую строку, которая является разрывом строки вместо абзаца.

Answer 2

Существует класс css, который применяется к HTML-содержанию TinyMCE.Похоже, у вас есть <p> теги, вызывающие интервал.Честно говоря, это выглядит довольно хорошо для меня.Но вы можете переопределить в классе css:

.tinymce-content p {
    padding: 0;
    margin: 2px 0;
}

Для получения дополнительной информации см. tinymce docs .

Answer 3

Вы можете заставить TinyMCE выводить div вместо абзацев.Просто поместите эту строку в раздел tinyMCE.init:

forced_root_block : 'div',

Answer 4

Я знаю, этот пост старый, но может кому-то помочь.

'force_br_newlines' и 'force_p_newlines' устарели с 3.5.

Использовать принудительно_корневые_блоки вместо:

tinyMCE.init({
        ...
        force_br_newlines : true,
        force_p_newlines : false,
        forced_root_block : '' // Needed for 3.x
});

Answer 5

В tinyMCE 4.x вы можете указать эту опцию

forced_root_block_attrs: { "style": "margin: 5px 0;" }

. Это добавит style: margin: 5px 0; для каждого тега p.

PS: этоне будет работать для копирования / вставки содержимого.

См .: http://archive.tinymce.com/wiki.php/Configuration:forced_root_block_attrs

Answer 6

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

tinyMCE.init({
    style_formats : [
            {title : 'Line height 20px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '20px'}},
            {title : 'Line height 30px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '30px'}}
    ]
});

В любом случае ... это сработало для меня

Answer 7

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