Визуализация абзаца и разрыва строки редактора Froala

Я хочу добавить знак ¶ Plicrow (объект CSS 00B6) и символ новой строки ↵ (объект CSS 21B5) в поля моего редактора Froala, чтобы мои пользователи могли иметь некоторое представление о том, что происходит. Другие редакторы RT, кажется, предоставляют это из коробки, но, хотя я нашел Froala отличным и хорошо спроектированным продуктом, этого не хватает.

Я нашел этот отличный ответ SO визуализировать разрыв строки и абзаца с символами в html, похожими на word. Однако кросс-браузерное решение вводит span перед br. Я смотрю на элемент contentEditable, содержащий плагин для редактирования форматированного текста, и я опасаюсь, что такая инъекция так или иначе испортит содержимое.

Здесь есть рабочий codepen, в котором используется не кросс-браузерное решение CSS только из приведенного выше вопроса. .

Sorry I can't provide a snippet as per my open question as follows...

Настройте фрагмент SO для редактора Froala.

Вот как это выглядит.

Вопрос — как добиться такого кроссбраузерного поведения либо с помощью чистого CSS-решения, либо с помощью js-решения, которое не облажается Froala.

введите здесь описание изображения


javascript css richtextbox froala
person Vanquished Wombat    schedule 12.02.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я надеюсь, что этот JSFiddle поможет вам решить вашу проблему.

https://jsfiddle.net/ba40L987/

#froala-editor-p
{
  border:1px solid #0000ff;  
}

p::after 
{
  content: '\00B6';
  color: #6495ED; 
  opacity: 0.9
}
br {
  content: " ";
}
 br::after 
{
  content: '\21b5\000a';
  color: #6495ED; 
  white-space: pre;
}

Пожалуйста, дайте мне знать, если это поможет.

person Gaurav Khanna    schedule 18.12.2019
comment
Похоже, это может сработать. Конечно, jsfiddle показывает предполагаемую функциональность. Я не смогу подробно рассмотреть до конца января, но тогда сообщу. - person Vanquished Wombat; 18.12.2019
comment
Не беспокойтесь, я уверен, что это должно сработать, как это сработало и для меня. Если это не работает для вас, пожалуйста, дайте мне знать, и я буду рад помочь вам в дальнейшем. С уважением, Гаурав - person Gaurav Khanna; 19.12.2019