3

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

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

4

2 回答 2

3

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

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

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

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

您需要阅读有关命令和 document.execCommand() 方法的信息。您可能应该专注于insertHTML命令，这在插入图像时会很有帮助。

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

于 2013-04-02T08:16:54.570 回答
1

假设您将使用 jQUery 插入图像，您可以查看 jquery wysiwyg editor https://github.com/akzhan/jwysiwyg以更好地理解它，也可以使用相同的代码（而不是 H1、H2 和类似的控件，您可以使用您的表情图像。考虑到只有一个，这非常简单。

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

于 2013-03-30T17:20:50.773 回答