如何在文本区域内插入 SVG 格式的自定义表情符号

Question

使用 String.fromCodePoint() 方法可以根据代码点将表情符号插入文本区域。

例如，此代码是将带有代码点 'U+263A' 的笑脸添加到文本区域的一种方法

var textArea = document.getElementById('txtarea');
textArea.value += " " + String.fromCodePoint('0x263A');

<textarea id="txtarea">Text value with smiling face</textarea>

如果网站内部使用的表情符号是svg格式怎么办？是否可以将它们附加到文本输入或文本区域？

Answer 1

您可以将 div 与 contenteditable 属性一起使用，而不是 textarea。这是一个 plain text control，所以我认为这是不可能的。

var textArea = document.getElementById('textarea');
textArea.innerHTML += " " + String.fromCodePoint('0x263A');

#textarea {
  font-family: monospace;
  outline: none;
  background: #efefef;
  border: #888 1px solid;
  display: block;
  position: relative;
  resize: both;
  overflow: auto;
  font-size: 9pt;
}

img {
  height: 15pt;
}

<div id="textarea" contenteditable="true">
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Emojione_1F60A.svg" />
</div>

如何在文本区域内插入 SVG 格式的自定义表情符号

How to insert custom emojis with SVG format inside a textarea

html

javascript

emoji