Уменьшить интервал между строками в текстовом поле TinyMCE

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

Ответ 1

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

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

Подробнее см. tinymce docs.

Ответ 2

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

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

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

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

Вы также можете изменить настройку, в которой вы можете переключаться между генерирующими тегами абзаца (p) или тегами linebreak (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, чтобы получить новую строку, которая представляет собой разрыв строки вместо абзаца.

Ответ 3

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

forced_root_block : 'div',

Ответ 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
});

Ответ 5

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

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

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

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

Обратитесь: http://archive.tinymce.com/wiki.php/Configuration:forced_root_block_attrs

Ответ 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'}}
    ]
});

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

Ответ 7

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