Javascript 使用“创建自定义基于web的文本编辑器”；span"；元素-一个坏主意？

我有一个web应用程序的想法，我需要完全控制嵌入式文本编辑器的功能，并且文本编辑器在所有浏览器中的功能必须完全相同。此时，标准的

contenteditable

功能不足以满足我的需要

因此，我一直在尝试各种方法来实现自定义文本编辑器。我的第一个方法是检测插入插入插入符号的鼠标点击（尽管没有可见插入符号，因为似乎没有实现这一点的方法）。这工作得相当好，但不幸的是，没有办法显示插入符号（又名闪烁的I形光束）

这意味着我的闪烁插入符号也必须是定制的。我只能想出两个好方法来实现这一点，这两种方法将兼容所有浏览器

第一个（可能更好）的选择是用JavaScript实现一个定制的布局引擎，就像Google使用Google文档所做的那样

第二种解决方案（可能容易得多）是将每个字符封装在其自己的

元素中，从而允许在特定字符之间放置人造插入符号。这确实意味着将有很多跨元素，但这肯定会实现我所需要的，同时利用浏览器布局引擎。这种方法的另一个好处是，我不需要依赖于狡猾的特定于浏览器的文本选择技巧

---

那么我的问题是，选项2真的是个坏主意吗？如果是，为什么？

首先，您真的需要使用自己的编辑器吗？还有一些非常酷的协作编辑，也许还有更多的开源编辑器不基于

contenteditable

。创建这样的编辑器真的很难，所以在上面浪费时间是没有意义的

但是，如果您真的想开发自己的解决方案，并且需要在所有浏览器上都有完全相同的行为，那么您就注定要失败。即使你要避免

contenteditable

也肯定会有其他事情出错

无论如何，答案是：

第一个选项在开始时非常困难和耗时，但它比第二个选项提供了更多的动力。例如，拥有完全定制的布局引擎，您将能够在不等待CSS3实现的情况下实现分页符（您永远无法依赖CSS3实现，因为您希望在所有浏览器中实现完全相同的行为）。事实上，您将能够绕过大多数浏览器的渲染差异。但是，除非你有一个像样的JS开发团队和几个月（至少）的时间，否则我甚至不会开始考虑这个问题

第二种解决方案——重用DOM更现实。我会先执行一些性能测试，但是在鼠标单击后，每个字符都有一个span，很容易找到插入符号应该放在哪里。没有这些，它需要一些技巧。。。我不知道。您可以尝试检查Etherpad和Firepad（使用）是如何处理的，但包装仍然是最简单的选择，至少在体面的浏览器上，它不应该导致性能问题，除非您想要编辑非常长的文档（但之后您可以开始一些优化）