我正在尝试为网页构建一个非常简单的WYSIWYG编辑器，唯一需要的功能是将情感图标添加到文本区域，以便显示图像本身 .
但是，我无法弄清楚如何在WYSIWYG编辑器的文本区域中显示图片，我真的很好奇它是如何实际工作的 . 有人可以解释一下所需技术的高层次想法吗？谢谢 . :)
关键字是 contenteditable . 所有WYSIWYG编辑器都基于此属性设置为 true 的元素 .
创建一个页面： <div contenteditable="true">foo! foo!</div> 并在任何浏览器上打开它 . 这个div是可编辑的 - 你可以输入它，按回车键，按ctrl b等 .
<div contenteditable="true">foo! foo!</div>
您可能看起来已经接近最终解决方案了，但是......不是 . 您很快就会注意到每个浏览器都以不同的方式创建标记，在一个浏览器上创建并加载到另一个浏览器上的标记不起作用，输入键有时会起作用，有时不起作用，粘贴会造成混乱，基于Webkit的浏览器会产生数百个 Span 等等
即使实现插入表情符号也不会那么容易 .
你需要阅读commands and document.execCommand() method . 您应该专注于 insertHTML 命令，这在插入图像时会很有用 .
但是如果你关心输出HTML和UX，我建议你使用一个现有的WYSIWYG编辑器（例如CKEditor，我在这里也有很大的选择，因为大多数WYSIWYG编辑器，除了少数（2-3）主要的，大量使用原生的contenteditable实现，所以他们是如此破碎 . 但最好的编辑修复了数百个问题，使得contenteditable真正可用 .
假设您将使用jquery插入图像，您可以查看jquery wysiwyg编辑器https://github.com/akzhan/jwysiwyg以更好地理解它并且也可以使用相同的代码（而不是H1，H2和类似的控件，您可以使用您的表情图像 . 它非常简单考虑到只有一个 .
检查https://github.com/akzhan/jwysiwyg#quick-start以更好地了解它的工作原理
2 回答
关键字是 contenteditable . 所有WYSIWYG编辑器都基于此属性设置为 true 的元素 .
创建一个页面：
<div contenteditable="true">foo! foo!</div>并在任何浏览器上打开它 . 这个div是可编辑的 - 你可以输入它，按回车键，按ctrl b等 .您可能看起来已经接近最终解决方案了，但是......不是 . 您很快就会注意到每个浏览器都以不同的方式创建标记，在一个浏览器上创建并加载到另一个浏览器上的标记不起作用，输入键有时会起作用，有时不起作用，粘贴会造成混乱，基于Webkit的浏览器会产生数百个 Span 等等
即使实现插入表情符号也不会那么容易 .
你需要阅读commands and document.execCommand() method . 您应该专注于 insertHTML 命令，这在插入图像时会很有用 .
但是如果你关心输出HTML和UX，我建议你使用一个现有的WYSIWYG编辑器（例如CKEditor，我在这里也有很大的选择，因为大多数WYSIWYG编辑器，除了少数（2-3）主要的，大量使用原生的contenteditable实现，所以他们是如此破碎 . 但最好的编辑修复了数百个问题，使得contenteditable真正可用 .
假设您将使用jquery插入图像，您可以查看jquery wysiwyg编辑器https://github.com/akzhan/jwysiwyg以更好地理解它并且也可以使用相同的代码（而不是H1，H2和类似的控件，您可以使用您的表情图像 . 它非常简单考虑到只有一个 .
检查https://github.com/akzhan/jwysiwyg#quick-start以更好地了解它的工作原理