Question

我想通过按钮点击在div中添加图片，然后根据图片的位置调整contenteditable div，并在图片周围换行文字。我想在这些图像中创建一些东西：

这可以通过使用CSS中的float属性来解决，但这也不是动态的，就好像我将图像移动到它左右浮动的任何地方，无论它在CSS中定义，因为它是在JSFiddle和代码中指定。

＆＃13;

function upload() {
  var filesSelected = document.getElementById("inputFileToLoad").files;
  if (filesSelected.length > 0) {
    var fileToLoad = filesSelected[0];

    var fileReader = new FileReader();

    fileReader.onload = function(fileLoadedEvent) {
      var srcData = fileLoadedEvent.target.result; // <--- data: base64
      var newImage = document.createElement('img');
      newImage.src = srcData;
      var image1 = newImage.outerHTML;
      var n;
      n = document.getElementById("test");
      n.innerHTML += image1;
    };
    fileReader.readAsDataURL(fileToLoad);
  }
}

＆＃13;

<input type="file" onchange="upload()" id="inputFileToLoad">
<div contenteditable="true" id="test" style="height=500">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

＆＃13;

如果我上传图片，而不是将图片包裹在图片周围，则只会出现在最后一行。

有没有人知道如何解决这个问题？

Answer 1

您可以假冒float: center图片，请参阅示例

https://css-tricks.com/float-center/

您需要使用标记包装图片，可能是div而不是设置before和after

如何在内容可编辑div中围绕图像动态包装文本？

1 个答案: