Question

我需要通过按格式标记按钮Formatting Marks button http://blogs.mccombs.utexas.edu/the-most/files/2011/04/show-hide-button-in-outlook.jpg

在MS Word中显示段落标记，空格和其他格式标记。

有没有一种简单的方法可以达到这个目的？

Answer 1

（我无法访问Word，但我认为它与大多数文本编辑器或InDesign＆＃39;显示隐藏的字符＆＃39;选项＆amp; c。）

不，绝对不是一个简单的方法，因为它是一个相当复杂的功能。

如果真的想要这样做，最好的选择是在用户输入文本时捕获div中的输入。像Bacon这样可以轻松地将键控用户输入捕获为流（并允许您在流中映射）的东西会稍微简化该过程。

然后，您需要使用相应的标记为用户替换*（实时）每个空格/段落标记/＆amp; c。实际输入仍然需要保存为键入，或者在保存以删除新的假装字符之前再次解析。虽然你可以使用unicode实体用于许多标记（也许是朝圣者？），但是空格（例如）仍将显示为空格（或者如果转义为实体代码），因此您需要使用代表性图标 - 基本上，大多数隐藏字符都需要有自己特定的，定义的渲染规则。

这都是相当噩梦。如果您可以确保最大量的文本可以保持较小，并且您可以控制用户可以输入的内容，那么它是可行的。对于大量的文本，我可以看到它变得可怕：不确定JS在性能方面的开销是多少，但我无法想象它会特别好。

*或append - 例如newlines / carriage return等需要同时显示为标记，并且实际上出现在contenteditable元素中。

编辑：除了上述内容之外，你可以做的是编辑字体，替换/添加隐藏字符的unicode点代替/以及可见的字符 - 你仍然需要捕获输入，但这会消除一些令人头疼的问题。例如，它可以很好地处理空间。还是有点噩梦，但是嘿。

Answer 2

创建一个将空格绘制为点和新行作为段落标记的字体可以解决您的问题。

在代码中它看起来像

.editable-div {
    font-family: "Your custom font with spaces as dots and stuff", "Actual character font";
}

这篇文章详细阐述了这种方法http://www.sitepoint.com/joy-of-subsets-web-fonts/

Answer 3

＆＃13;

<html>
	<head>
		<style>
			span::after{
    color:black;
    content:"\00b6";
}
          p::after{
    color:black;
    content:"\00b6";
}
          
		</style>
	</head>
	<body>
		<h3>
			<span class="label">This is the main label</span>
			<span class="secondary-label">secondary label</span>
		</h3>
		<P>Quote me</p>
	</body>
</html>

＆＃13;

在contenteditable div中显示段落标记，空格和其他格式标记

3 个答案: