使用"span"创建一个自定义的基于web的文本编辑器;元素——一个坏主意

Creating a custom web-based text editor using "span" elements - a bad idea?

本文关键字：一个 quot 元素编辑器文本编辑自定义创建 span 使用 web 文本更新时间：2023-09-26

我有一个web应用程序的想法，我需要完全控制嵌入式文本编辑器的功能，文本编辑器必须在所有浏览器中完全相同。在这种情况下，标准的contenteditable功能不足以满足我的需求。

所以我一直在尝试各种方法来实现自定义文本编辑器。我的第一种方法是检测插入符号的鼠标点击(虽然没有可见的插入符号，因为似乎没有办法实现这一点)。这工作得相当好，但不幸的是没有办法显示插入符号(又名闪烁工字)。

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

第一个(可能更好)的选择是在JavaScript中实现自定义布局引擎，就像谷歌在谷歌文档中所做的那样。
第二个解决方案(可能容易得多)是将每个字符封装在自己的<span>元素中，从而允许在特定字符之间放置伪插入符号。这确实意味着会有很多跨度元素，但这肯定会实现我需要的，同时利用浏览器布局引擎。这种方法的另一个好处是，我不需要依赖于浏览器特定的文本选择技巧。

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

首先，你真的需要自己开发编辑器吗?有Firepad和Etherpad，它们非常酷的协作编辑，也许更多的开源编辑器不是基于contenteditable。创建这样的编辑器真的很难，所以浪费时间在上面是没有意义的。

然而，如果你真的想要自己的解决方案，并且你需要在所有浏览器中完全相同的行为，那么你注定要失败;)。即使你能避免contenteditable，也肯定有其他事情会出错。

总之，答案是:

第一个选项在开始时非常困难和耗时，但它比第二个选项提供了更多的功能。例如，拥有完全自定义的布局引擎，你将能够实现分页符而无需等待CSS3的实现(你永远无法依赖，因为你希望完全在所有浏览器中都具有相同的行为)。事实上，您将能够绕过大多数浏览器的呈现差异。但是，除非你有一个优秀的JS开发团队，并且至少需要几个月的时间，否则我甚至不会开始考虑这个问题。
第二个解决方案——重用DOM更为现实。我将首先执行一些性能测试，但每个字符的span将很容易找到插入符号应该在鼠标单击后放置的位置。如果没有，它需要一些技巧……我不知道。您可以尝试检查Etherpad和Firepad(使用Ace代码编辑器)如何处理，但仍然-包装将是最简单的选择，至少在体面的浏览器上，它应该不会导致性能问题，除非您想要编辑非常长的文档(但随后您可以开始一些优化)。