实现WYSIWYG编辑器的基本思路

Question

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

然而，我无法弄清楚如何在WYSIWYG编辑器的文本区域中显示图片，我真的很好奇它是如何实际工作的。有人可以解释一下所需技术的高层次想法吗？谢谢。 ：）

Answer 1

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

使用<div contenteditable="true">foo! foo!</div>创建一个页面，并在任何浏览器上打开它。这个div是可编辑的 - 你可以输入它，按回车键，按ctrl + b等等。

看起来你已经接近最终的解决方案了，但是......不是。您很快就会注意到，每个浏览器都以不同的方式创建标记，在一个浏览器上创建并加载到另一个浏览器的标记不起作用，输入键有时可以工作，有时不起作用，粘贴会造成混乱，基于Webkit的浏览器会产生数百个跨度等等。

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

您需要了解commands and document.execCommand() method。您应该专注于 insertHTML 命令，这在插入图像时会很有用。

但是如果您关心输出HTML和UX，我建议您使用现有的WYSIWYG编辑器之一（例如CKEditor，我是核心开发人员;）。你在这里也没有很大的选择，因为大多数所见即所得的编辑器，除了少数（2-3）主要编辑器，都大量使用原生的可满足的实现，所以它们是如此破碎。但最好的编辑解决了数百个问题，使得这个问题真正可用。

Answer 2

假设您将使用jquery插入图像，您可以查看jquery所见即所得编辑器https://github.com/akzhan/jwysiwyg以更好地理解它并且也可以使用相同的代码（而不是H1，H2和类似控件，您可以使用表情符号图像。考虑到只有一个，这很简单。

检查https://github.com/akzhan/jwysiwyg#quick-start以更好地了解它的工作原理