Javascript 在向下箭头键上，光标进入包含图像的div中

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

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

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

那个么，我应该做些什么更改，以便在按下键时将光标置于div下方

简单地添加

contenteditable="false"

对于包含图像的div，似乎可以解决问题

#编辑器{
溢出：滚动；
最大高度：250px；
高度：250px；
背景色：白色；
边界塌陷：分离；
边框：1px实心rgb（204204204）；
填充：4px；
框大小：内容框；
-webkit盒阴影：rgba（0,0,0,0.0745098）0px 1px 1px 0px插入；
盒影：rgba（0,0,0,0.0745098）0px 1px 1px 0px插入；
边框右上角半径：3px；
边框右下半径：3px；
边框左下半径：3px；
边框左上半径：3px；
溢出：滚动；
大纲：无；
}
div{
显示：块；
}

第一行
//单击向下箭头键后，光标进入图像div


最后一行

演示：

---

使div

contenteditable=“false”

并在图像旁边添加

textarea

元素。如上面的示例所示。

您是否可以包含更多代码，作为项目当前状态的有效表示？来一杯鸡尾酒就好了。另外，我不清楚你到底需要什么。我是否理解正确：1）你说的是一个编辑器，用户可以在其中放置图像。2） 当输入光标（焦点）位于div上方，并且用户按下向下箭头时，是否希望它跳过div下方而不是内部？这是给你的。很抱歉，格式不好，这是由基于引导的HTML编辑器生成的代码。它不会使所有内容都不可编辑，也不会单独修复光标超出内部div的问题

contenteditable="false"