Question

我正在修改基于bootstrap的HTML编辑器。我已经完成了图像上传部分。在图像上传中，我在div中创建了一个图像。

<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;">
    <img src="uploads/images/dark_knight.jpg"> 
</div>

我希望图片可以调整大小，

element.style {
   border: 1px solid;
   padding: 10px;
   width: 300px;
   resize: both;
   overflow: auto;
  }

但问题是当我按下一个向下键的光标进入一个包含图像的div（而不是一个div）时。

那么我应该做些什么改变才能在按下键的同时将光标移到div下面？

Answer 1

简单地添加

contenteditable="false"

到包含图像的div似乎解决了问题。

#editor {
  overflow: scroll;
  max-height: 250px;
  height: 250px;
  background-color: white;
  border-collapse: separate;
  border: 1px solid rgb(204, 204, 204);
  padding: 4px;
  box-sizing: content-box;
  -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
  box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  overflow: scroll;
  outline: none;
}
div {
  display: block;
}

<div id="editor" contenteditable="true">First line
  <div>
    //after clicking down arrow key cursor going inside an image div

    <div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;" contenteditable="false">
      <img src="abcd.jpg">
    </div>

  </div>
  <div>
    <br>
  </div>
  <div>Last line</div>
</div>

Answer 2

演示： http://jsfiddle.net/u37cxxbh/2/

制作div contenteditable="false"并在图片旁边添加textarea元素。如上例所示。

在包含图像的div内的向下箭头键光标

2 个答案: