在向下箭头键光标进入 div 包含图像

Question

我正在修改基于 bootstrap 的 HTML 编辑器。我已经完成图片上传 part.In 图片上传，我正在 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 包含图像

On down arrow key cursor going inside a div containing image

javascript

jquery

html

css

html-editor