wysiwyg - 实现所见即所得编辑器的基本思想

Question

我正在尝试构建一个非常简单的所见即所得的网页编辑器，唯一需要的功能是将情感图标添加到文本区域中，以便显示图像本身。

但是，我不知道如何在所见即所得编辑器的文本区域中显示图片，我真的很好奇它实际上是如何工作的。有人可以解释一下所需技术的高级想法吗？谢谢。 :)

Answer 1

关键字是contenteditable。所有所见即所得编辑器都基于此属性设置为 true 的元素。

创建一个页面:<div contenteditable="true">foo! foo!</div>并在任何浏览器上打开它。该 div 将是可编辑的 - 您可以在其中键入内容、按 Enter 键、按 ctrl+b 等。

看起来您已经接近最终解决方案，但是......不是。您很快就会注意到，每个浏览器创建标记的方式都不同，在一个浏览器上创建并加载到另一个浏览器上的标记不起作用，回车键有时有效，有时无效，粘贴会导致困惑，基于 Webkit 的浏览器会创建数百个跨度等等等等

甚至实现插入表情符号也不会那么容易。

您需要阅读 commands and document.execCommand() method 。您可能应该关注 insertHTML 命令，这在插入图像时会很有帮助。

但是，如果您关心输出 HTML 和 UX，我建议您使用现有的所见即所得编辑器之一(例如 CKEditor，我是核心开发人员；)。您在这里也没有太大的选择，因为大多数所见即所得编辑器，除了少数(2-3)个主要编辑器之外，大量使用 native contenteditable 实现，因此它们是如此 splinter 。但最好的编辑器会解决数百个此类问题，使 contenteditable 真正可用。