TinyMCE - некорректная работа

[holistic 24]

В DLE 15.1 редактор TinyMCE (на уровне кода) постоянно добавляет в конце всего текста лишний пустой абзац:

<p></p>

Избавиться от этой заразы никак нельзя.

Более того, если добавить класс к последнему абзацу:

<p class="my_own"></p>

то TinyMCE всё равно добавит в конце еще один пустой абзац.

Разработчик может указать, где можно отключить эту гадскую особеность редактора?

А Froala такого не делает...

[celsoft 6 094]

Нет таких настроек у редактора, это не включается и не отключается настройками.

[holistic 24]

1 минуту назад, celsoft сказал:

Нет таких настроек у редактора, это не включается и не отключается настройками.

Как же отключить авто добавление <p>, чтобы если человек сам нажал Enter только тогда вставляется абзац?

[celsoft 6 094]

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

Поэтому просто не оставляйте курсор в конце, а ставьте его например в выше на какую то часть текста.

[holistic 24]

Спасибо!

[skapunker 71]

В TinyMCE есть кстати еще недоработка. Суть такая: 

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

<p>Абзац 1</p>
<p>
<div class="title_spoiler">показать скрыть текст</div>
<div class="title_text">Абзац 2</div>
</p>
<p>Абзац 3</p>

Тег p является блочным, и если он встречает другой блочный элемент, например div, то он автоматически закрывается.

Таким образом, у нас получается, что сверху и снизу от спойлера находятся 2 пустых абзаца. Это как минимум не профессионально.

[celsoft 6 094]

17 часов назад, skapunker сказал:

Тег p является блочным, и если он встречает другой блочный элемент, например div, то он автоматически закрывается.

Таким образом, у нас получается, что сверху и снизу от спойлера находятся 2 пустых абзаца. Это как минимум не профессионально.

Это как минимум правильно и полностью соответствует стандартам HTML. Изучите его, div не может быть вложен в p. И это не требование редактора, это требования стандарта HTML. Поэтому редактор так и делает чтобы код был валиден и полностью соответствовал стандартам HTML. Поэтому в данном вопросе он все делает правильно и корректно.

[redissx 251]

1 час назад, celsoft сказал:

Это как минимум правильно и полностью соответствует стандартам HTML. Изучите его, div не может быть вложен в p. И это не требование редактора, это требования стандарта HTML. Поэтому редактор так и делает чтобы код был валиден и полностью соответствовал стандартам HTML. Поэтому в данном вопросе он все делает правильно и корректно.

Вероятно речь о том зачем остаются пустые р и их нужно  удалять.

[celsoft 6 094]

2 часа назад, redissx сказал:

Вероятно речь о том зачем остаются пустые р и их нужно  удалять.

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

[skapunker 71]

20 часов назад, redissx сказал:

Вероятно речь о том зачем остаются пустые р и их нужно  удалять.

Речь об этом и идет.

21 час назад, celsoft сказал:

Изучите его, div не может быть вложен в p

Я об этом  и говорю.

Однако рекдактор как раз и вкладывает div в p, а тег p сверху и снизу от спойлера закрывает уже сам браузер при отрисовке страницы. Несмотря на это, код валидный.

[celsoft 6 094]

2 часа назад, skapunker сказал:

Однако рекдактор как раз и вкладывает div в p, а тег p сверху и снизу от спойлера закрывает уже сам браузер при отрисовке страницы. Несмотря на это, код валидный.

Неверно. Спойлер это ББ тег, а не div, т.е. обычный текст. А обрабатывает ББ теги уже DLE. Поэтому валидно, вы же привели div теги

[skapunker 71]

15 минут назад, celsoft сказал:

Спойлер это ББ тег, а не div, т.е. обычный текст.  А обрабатывает ББ теги уже DLE.

я это и имел ввиду, что после обработки получается div

16 минут назад, celsoft сказал:

Поэтому валидно, вы же привели div теги

Валидно, но сверху и снизу браузер рисует пустые абзацы. Разве вас это не смущает? Какой смысл абзацам быть пустыми? Особенно, если специально пользователь их не создавал. Это что-то навроде побочного продукта.

Пустых абзацев можно избежать, но тогда каждый раз придется удалять тег p вручную из исходного кода, что замедляет работу, особенно если нужно вставлять по 10 спойлеров в новость.

[celsoft 6 094]

25 минут назад, skapunker сказал:

я это и имел ввиду, что после обработки получается div

При редактировании вы не видите div в редакторе, вы видите опять спойлер и теги спойлера, не может редактор вам корректировать при редактировании и закрывать p.

26 минут назад, skapunker сказал:

Валидно, но сверху и снизу браузер рисует пустые абзацы. Разве вас это не смущает? Какой смысл абзацам быть пустыми? Особенно, если специально пользователь их не создавал. Это что-то навроде побочного продукта.

Ничего редактор не рисует. Не путайте вебинспектор браузера с тем что браузер нарисовал на странице, в вебинспекторе это закрытый тег, чтобы вы могли дописывать там свойства, контент и прочее. На странице никаких пустых абзацев нет.

[nezov134 31]

Как вместо <div> вставлять <br>? редактор можно как то настроить?

Редактор добавляет лишние теги. Например:

Не вставляю текст со стилями. Написал вручную. Редактор посчитал нужным сделать текст меньше. 

Альтернатив нет. Использую редактор только потому, что там доступен черновик в случае потери контента.

Изменено 17 ноября 2022 пользователем nezov134

[TeraMoune 56]

5 часов назад, nezov134 сказал:

Как вместо <div> вставлять <br>? редактор можно как то настроить?

 

Можно, надо добавить параметров в инициализацию.

https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x@force_br_newlines/

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

Более подробно читайте и ищите всё в документации к редактору. Там примеры и описания, правда на английском.

P.S. Не знаю почему у Вас div. Редактор дивы не вставляет. Он либо P либо BR использует.

Изменено 18 ноября 2022 пользователем TeraMoune

[celsoft 6 094]

8 часов назад, nezov134 сказал:

Как вместо <div> вставлять <br>? редактор можно как то настроить?

В чем текст стоит, то и использует редактор. Стоит в div  значит при нажатии enter будет div, стоит p значит будет p. Для того чтобы поставить br т.е. просто перенос строки а не новый абзац нужно вместо enter нажимать shift + enter

8 часов назад, nezov134 сказал:

Редактор добавляет лишние теги. Например:

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

[skapunker 71]

А в TinyMCE можно сделать, чтобы размер шрифта выставлять в пикселях, а не пунктах? В пунктах неудобно и ими никто не пользуется.

[celsoft 6 094]

Только что, skapunker сказал:

А в TinyMCE можно сделать, чтобы размер шрифта выставлять в пикселях, а не пунктах? В пунктах неудобно и ими никто не пользуется.

Через систему плагинов изменив настройки редактора только

[ZzzBep 18]

Может кто подсказать по какой причине редактор удаляет значение position 

Вставляю код

<div style="max-width: 100%; position: relative; width: 100%; padding-bottom: 56%;"><iframe allowfullscreen="allowfullscreen" frameborder="0" style="width: 100%; height: 100%; position: absolute;" name="smotrim_player_2525502" src="//player.smotrim.ru/iframe/video/id/2525502/sid/smotrim/start_zoom/true/showZoomBtn/false/isPlay/false/"></iframe></div>

после сохранения

<div style="max-width: 100%; width: 100%; padding-bottom: 56%;"><iframe allowfullscreen="allowfullscreen" frameborder="0" style="width: 100%; height: 100%;" name="smotrim_player_2525502" src="//player.smotrim.ru/iframe/video/id/2525502/sid/smotrim/start_zoom/true/showZoomBtn/false/isPlay/false/"></iframe></div>

 

[celsoft 6 094]

Это удаляет скорее всего не редактор, а DLE. Не все свойства CSS допустимы в использовании в текстах новостей. А только безопасные в плане не нарушения верстки, и position к таковым не относится. Чтобы DLE не фильтровал текст нужно создавать специальное доп. поле с типом без фильтрации HTML и только там можно использовать любой HTML без ограничений.

[ntrtv 56]

18.11.2022 в 01:42, nezov134 сказал:

Редактор добавляет лишние теги. Например:

 

Я тоже писал об этом в другой теме, но мне ответили, что это мы сами вставляем. Хотя ничего, никаких span мы не вставляем.

[celsoft 6 094]

10 минут назад, ntrtv сказал:

Я тоже писал об этом в другой теме, но мне ответили, что это мы сами вставляем. Хотя ничего, никаких span мы не вставляем.

Вы приносите это из буфера обмена. Копирует его ваш браузер в буфер. Что находится в буфере обмена то и вставляется. Если не верите, то можете прочитать свой буфер обмена JS скриптов перед вставкой и сами увидите что там находится. Чтобы очищать любое форматирование и вставлять только текст из буфера в редакторе есть опция "Вставить как текст". И тогда все без исключения будет очищаться, в противном случае редактор очищает только неподдерживаемое форматирование и теги, все остальное остается как есть. Не редактор принимает решение как должно быть оформление в буфере при копировании, а ваш браузер.

[ZzzBep 18]

6 часов назад, celsoft сказал:

Это удаляет скорее всего не редактор, а DLE. Не все свойства CSS допустимы в использовании в текстах новостей. А только безопасные в плане не нарушения верстки, и position к таковым не относится. Чтобы DLE не фильтровал текст нужно создавать специальное доп. поле с типом без фильтрации HTML и только там можно использовать любой HTML без ограничений.

Прочитал ваше сообщение несколько раз, так и не понял о каких небезопасных свойствах в вёрстке идёт речь. Они же вроде обернуты в div.

Редактор должен отобразить то что ему воткнули, правильно же?

[МВИА 10]

30.05.2022 в 14:40, celsoft сказал:

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

Также, часто бывает, что просто открываешь статью, в моем случае подкорректировать полную новость, а в короткой , чаще перед статьей, вставляются теги <p></p>

их удаляешь вручную, но они опять вставляются при сохранении...

17 часов назад, celsoft сказал:

Это удаляет скорее всего не редактор, а DLE. Не все свойства CSS допустимы в использовании в текстах новостей. А только безопасные в плане не нарушения верстки, и position к таковым не относится. Чтобы DLE не фильтровал текст нужно создавать специальное доп. поле с типом без фильтрации HTML и только там можно использовать любой HTML без ограничений.

Ещё, в догонку, в css нет опасных и безопасных свойств. Это высказывание противоречит основам веб-дизайна.

[celsoft 6 094]

11 часов назад, ZzzBep сказал:

Прочитал ваше сообщение несколько раз, так и не понял о каких небезопасных свойствах в вёрстке идёт речь. Они же вроде обернуты в div.

Безопасный это значит верстка которая останется в пределах определенного тегом в шаблоне контента, не разрушит вертку всего сайта, т.е. весь сайт не поведет, блоки не развалятся и т.д. Например position позволяет слой поместить куда угодно в пределах страницы, например "воткнуть" его невидимым визуально, или наверх или вниз загнать, вообщем куда угодно. Поэтому такой атрибут недопустим непосредственно для написания новости. Таких тегов и атрибутов весьма много. В новостях пишутся новости, контент для публикации, а не верстается все подряд. Ваш сайт должен быть уже сверстан в шаблоне так как вам нужно.

Например вам нужно обязательно в новостях использовать такой div c такими свойствами, то вы должны подготовить свой сайт к этому, например в css шаблона прописать класс

.test{
	max-width: 100%;
	position: relative;
	width: 100%;
	padding-bottom: 56%;
}

в тексте новости уже писать <div class="test"> и т.д. Т.е. использовать подготовленные заранее и как следствие легитимные оформления для новости. А не пытаться новостью верстать все целиком. Новость для новости, не для полной верстки сайта

41 минуту назад, МВИА сказал:

Ещё, в догонку, в css нет опасных и безопасных свойств. Это высказывание противоречит основам веб-дизайна.

Не путайте написание новости в админпанели с версткой сайта. Верстаете вы в шаблоне, а в данном случае вы пишите текст новости, а не вертаете сайт. Когда вы пишите новость, вы пишите только контент в определенное уже сверстанное место, а не верстаете вебдизайн и верстку вашего сайта. Вещи принципиально разные.