javascript - Froala Editor 段落和换行可视化

Question

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

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

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

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

如果这有帮助，请告诉我。