CSS в CKEDITOR - Как создать HTML-код типа <p></p> дисплей красного цвета?

Question

Мы использовали tinymce в нашем приложении и пытались перейти на CKEDITOR. Все содержимое хранится в базе данных с помощью <p><!-- pagebreak --></p> для разрыва страниц при создании содержимого PDF.

Теперь мы пытаемся перейти на CKEDITOR, HTML-код работает нормально, а генерация PDF также работает нормально. Но проблема в том, что CKEDITOR ничего не отображает для <p><!-- pagebreak --></p> - Это как пустое место в редакторе WSIWYG.

Мне нужно создать решение, в котором CKEDITOR <p><!-- pagebreak --></p> с дисплеем CSS ... как, скажем, RED LINE. Я не могу изменить код, поскольку он хранится в БД, поэтому мне нужно, чтобы CKEDITOR делал некоторые трюки CSS для отображения <p><!-- pagebreak --></p> в виде красной линии в редакторе

Answer 1

Это то, что я бы сделал, если вы действительно хотите мигрировать и не нужно взламывать какой-либо код, - это преобразовать все <p><!-- pagebreak --></p> в записях вашей базы данных в <div class="page-break"></div> и установить значение css

.

.page-break
{
    page-break-after:always`
}

Или использовать то, что делает CKEDITOR

<div style="page-break-after: always;">
    <span style="display: none;">&nbsp;</span>
</div>

Answer 2

К сожалению, вы не можете стилизовать этот HTML-тег, не затрагивая другой контент в этом поле.

Вы видите, что он определяется как простой тег абзаца без класса или других определяющих атрибутов вообще (<p> в отличие от<p class="line-break">).Это делает невозможным «привязать» свой собственный стиль только к тем узлам с помощью CSS.

Содержимое тега - это просто комментарий HTML, который никогда не отображается и поэтому не может быть стилизован.

Вы могли бы стилизовать это, если вы извлекаете кодированный в CK текст из базы данных, используя для отображения язык, такой как PHP, - в этом случае вы можете сделать str_replace для HTML, который вы отметили, и фактически внедритьловушка, такая как имя класса.

Еще один вариант - использовать JavaScript для поиска в HTML этого узла и динамически внедрить либо имя класса, либо другой узел, например, горизонтальное правило (<hr>).

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

p.line-break { border-bottom: 2px solid red; }