Question

我想创建一个文本框，您可以在其中写文本并通过单击上载按钮添加照片。问题是在文本区域中我无法添加此类元素。

另一个问题是，如果我使用contenteditable 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>

Answer 1

Transformer

.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类中添加.upload { display: inline-block }

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

在textarea / contenteditable div中使用“添加文件”添加图像

2 个答案: