使用"span"元素创建自定义基于Web的文本编辑器——这是一个不好的主意吗？

Question

我有一个关于Web应用程序的想法，需要完全控制嵌入式文本编辑器的功能，并且必须确保所有浏览器中文本编辑器的功能完全相同。标准的contenteditable功能对我的需求不够。因此，我一直在尝试各种方法来实现自定义文本编辑器。我的第一个方法是检测鼠标点击以插入插入符号（虽然没有可见的插入符号，因为似乎没有办法实现这一点）。这种方法效果很好，但不幸的是无法显示插入符号（也称为闪烁的I形光标）。这意味着我的闪烁插入符号也必须是自定义的。我只能想到两种能够跨所有浏览器兼容的好方法:

1. 第一种（也许更好的）选择是使用JavaScript实现自定义布局引擎，就像Google Docs一样。
2. 第二个解决方案（可能更容易）是将每个字符封装在自己的<span>元素中，从而允许虚假插入符号放置在特定的字符之间。这确实意味着会有大量的元素，但这肯定可以实现我需要的功能并利用浏览器布局引擎。这种方法的另一个好处是我不需要依赖于危险的特定于浏览器的文本选择技巧。

所以我的问题是，第二个选项是否是一个非常糟糕的想法？如果是，为什么？

- Lea Hayes

Answer 1

首先，你真的需要自己开发编辑器吗？有Firepad和Etherpad这样非常酷的协作编辑器，也许还有其他不基于contenteditable的开源编辑器。创建这样的编辑器真的很难，因此浪费时间没有意义。

但是，如果你真的想要开发自己的解决方案，并且需要在所有浏览器上实现完全相同的行为，那么你注定会失败 ;）。 即使你避免使用contenteditable，肯定还有其他可能出错的地方。

无论如何，答案是：

1. 第一种选择在开始时非常困难和耗时，但它比第二种选择给你更多的控制权。例如，拥有完全自定义的布局引擎，您将能够实现页面断点而不需要等待 CSS3 的实现（您永远无法依赖它，因为您想要在所有浏览器中获得完全相同的行为）。事实上，您将能够绕过大多数浏览器的渲染差异。但是，除非您拥有一支像样的 JS 开发团队和几个月的时间（至少），否则我甚至不会考虑这个。

2. 第二种解决方案-重用 DOM 更加现实。我会先进行一些性能测试，但是每个字符都有一个 span，很容易找出鼠标单击后应该放置插入符号的位置。如果没有它，则需要一些技巧……我不知道。您可以尝试查看 Etherpad 和 Firepad（使用 Ace 代码编辑器）如何处理此问题，但仍然包装将是最简单的选择，至少在像样的浏览器上，它不应该导致性能问题，除非您想编辑非常长的文档（但那时您可以开始进行一些优化）。

- Reinmar