在 textarea/contenteditable div 中添加带有“添加文件”的图像答案

【问题标题】：add images with "add file" in a textarea/contenteditable div在 textarea/contenteditable div 中添加带有“添加文件”的图像
【发布时间】：2019-01-01 21:42:28
【问题描述】：

我想创建一个文本框，您可以在其中编写文本并通过单击上传按钮添加照片。问题是在 textarea 中我不能添加这样的元素。

另一个问题是，如果我使用内容可编辑的 div，插入其中的照片/div 也将是内容可编辑的，我不希望这样。如果我将可编辑 div 的子级的属性 contenteditable 设置为 false，它将使其父级不可编辑。

<div contenteditable="true" id="text" name="text" class="text" wrap="hard">
    <div class="upload" contenteditable="false">
         <img id="output" />
    </div>
</div>

【问题讨论】：

标签： javascript html css contenteditable

【解决方案1】：

.upload {
  display: inline-block
}

<div contenteditable="true" id="text" name="text" class="text" wrap="hard">
    <div class="upload" contenteditable="false">
         <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id="output" />
    </div>
</div>

.upload {
  display: inline-block
}

在.upload 类中添加display:inline-block

【讨论】：

是的，它有效。但是，如果在该 div 上应用其他样式，它将不再起作用。 Bsicly 当我上传一些东西时，我想把它放在文本区域的底部。像这样的东西：-------------------------------------------- |正文正文正文正文正文正文正文正文| |正文正文正文正文正文正文正文正文| |正文正文正文正文正文正文正文正文| |图片图片图片图片| -------------------------------------------------------
@lok30 其他风格是什么意思？最好附上截图供参考。

【解决方案2】：

选择图像后，您可以将图像数据（base64 编码字符串）传递给位于可编辑 div 中的图像标签

例子：

 function readURL(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById('myImg').setAttribute('src',e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    document.getElementById('selImg').onchange = function () { //set up a common class
        readURL(this);
    };

#upload {
    border: 1px solid black;
    height: 50px;
    padding: 2px;
    width: 400px;
}

<input class="file" type='file' id="selImg" />

<div id="upload" contenteditable>
  <img contenteditable="false" style="width:45px" id="myImg" />
  Textarea
</div>

http://jsfiddle.net/ga1d5bms/6/

您可以在 img 元素上设置 contenteditable="false" 使其不可编辑。

可编辑的 div 看起来像一个 textarea 元素： http://jsfiddle.net/uq8tpfr9/

【讨论】：