1

I want to add a ¶ Plicrow sign (CSS entity 00B6) and the ↵ newline character (CSS entity 21B5) to my Froala Editor boxes so that my users can have some idea of what is going on. Other RT editors seem to provide this out of the box but, though I have found Froala to be an excellent and well-engineered product, this is missing.

I found this excellent SO answer visualize line-break and paragraph break with symbols in html similar to word. However, the cross-browser solution injects a span before the br's. I am looking at a contentEditable element housing a rich text editing plugin and I am wary that such an injection will mess up the content one way or another.

There is a working codepen here which uses the non-cross browser CSS only solution from the above question. 

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

Set up a SO snippet for Froala Editor.

This is what it looks like.

Question - how to get this behavior cross-browser with either a pure CSS solution or a js solution that will not screw up Froala.

enter image description here

Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67

1 Answers1

2

I am hoping that this JSFiddle will help you resolve your issue.

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;
}

Kindly let me know if this helps.

Gaurav Khanna
  • 101
  • 5
  • That looks like it might work. Certainly the jsfiddle shows the intended functionality. I will not be able to look in detail until end of Jan but will report back then. – Vanquished Wombat Dec 18 '19 at 16:03
  • No worries, I am sure this should work as it worked for me too. If it does not works for you, kindly let me know and I will happy to help you further. Cheers, Gaurav – Gaurav Khanna Dec 19 '19 at 06:48