php - 文本区域如何显示 svg 文件

Question

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

这是文本区域的代码

<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>

这是 svg 的 javascript

function test(){
    $.ajax({
        url:"emoticons/cloudda3.svg",
        success:function(result){
            $("#comment").val(result);
        }
    })
}

Answer 1

A 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>

Note: The <img> tag in the <div> can be replaced with any valid image or SVG.

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