javascript - Froala编辑器段落和换行符可视化

我想在我的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解决方案或js解决方案（不会破坏Froala）跨浏览器获取此行为。

最佳答案

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

请告诉我是否有帮助。