Question

尝试在我的聊天应用程序中插入一些svg。如果我将它们用作PHP文件，可以在F中显示它们，但是在文本区域中是svg的完整代码。当我尝试将其显示为svg时，我在聊天中只能看到的是chat#div的文本区域和[object XMLDocument]

这是文本区域的代码

#div

这是svg的javascript

<textarea id="comment" style="width: 280px; margin-top: 10px; box-shadow: 
 inset 0 -15px 35px -5px rgba(0,0,0,0.3); height: 40px; overflow: auto; 
  pointer-events: all;">
</textarea>

Answer 1

div元素具有contenteditable属性，将其设置为true将允许用户输入和修改div中的数据。最好的事情：div可以包含包含图像的富文本。

.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: 9pt;
}

<div class="textarea" contenteditable="true">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Perry-miniature-donkey-in-Palo-Alto-CA-2016.jpg/800px-Perry-miniature-donkey-in-Palo-Alto-CA-2016.jpg" />
</div>

注意：<img>中的<div>标签可以替换为任何有效的图片或SVG。

作为旁注，@ emaillenin说textareas仅用于文本是正确的。另外，我注意到您使用val函数进行插入，这意味着该元素的值已更新，而不是innerHTML。这将导致与您现在看到的行为类似的行为。如果只想从div中获取文本，请使用text函数。

Textarea如何显示SVG文件

1 个答案: