Froala Editor段落和换行可视化

Question

我想在我的Froala编辑器框中添加一个¶Plicrow符号（CSS实体00B6）和↵换行符（CSS实体21B5），这样我的用户就可以知道发生了什么。其他RT编辑似乎提供了开箱即用的功能，但是，尽管我发现Froala是一款出色且设计精良的产品，但却缺少这种产品。

我找到了这个优秀的答案visualize line-break and paragraph break with symbols in html similar to word。但是，跨浏览器解决方案会在br之前注入一个跨度。我正在寻找一个包含富文本编辑插件的contentEditable元素，我担心这样的注入会以某种方式搞乱内容。

有一个工作codepen here，它使用上述问题中的非跨浏览器CSS解决方案。

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

Set up a SO snippet for Froala Editor

这就是它的样子。

问题 - 如何使用纯CSS解决方案或不会搞砸Froala的js解决方案来跨浏览器获取此行为。

Answer 1

我希望这个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;
}

请告诉我是否有帮助。