Question

我正在尝试找出一种方法来创建一个能够显示png图像（表情符号）的网页的texteditor，并使用纯javascript获取文本类型和表情符号（可能是id或类似的东西）。

我遇到了“contenteditable”，我可以使用div，但我可以弄清楚如何检索javascript中输入的内容。

有什么建议吗？我不愿意使用jquery，我只使用纯粹的js

Answer 1

您可以在<img>元素中使用contenteditable标记，然后使用HTML input event来捕获更改

<div contenteditable="true" id="editor">See: <img src="//i.stack.imgur.com/nO2hl.png"/> <img src="//i.stack.imgur.com/iUDpH.png"/> all your text goes here with img<img src="//i.stack.imgur.com/QrKSV.png"/></div>

你喜欢的样式div：

[contenteditable] {
  border: 1px solid #000;
  line-height: 1.4em;
  -webkit-appearance: textfield;
  appearance: textfield
}
img {
  vertical-align: top;
   max-height: 1.5em;
  max-width: 1.5em;
}

演示：http://jsfiddle.net/rpdheeya/

如何在html中创建一个能够显示png笑脸的聊天短信？

1 个答案: