尝试制作文本编辑器时出现问题

Question

在这里，我试图制作一个具有两个特征的文本编辑器。

1. 随着文本数量的增加，它的大小也会增加。

2.可以用鼠标向上或向下拖动（我还没有实现它，所以现在已经不成问题了）

我在编辑器div的底部放置了一个向下指示器图像。 问题是：

1.当文本到达底部时，它与指示符图像交互。我想要这样一种方式：当文本到达指示符图像上方的突然点时，它将向下扩展。

2.指示器图像是在我在编辑器中输入一个字符后出现的。我希望它从一开始就出现。

3. ENTER键出现问题。文本指针出现在图像上，第二行输入新行。

那是整体情况。我尽力解释了这些问题。我该如何解决？ 如果有更好的方法，请告诉我。

  #editor{ position:relative; width:400px; height:auto; border:1px solid black; word-wrap: break-word; padding-left:4px; padding-right:4px; box-sizing:border-box; overflow-y:scroll; } 

 <div id='editor' contenteditable='true' ><img src='http://s22.postimg.org/rh9bx9a3h/ind.png?noCache=1437598902' style='position:absolute;bottom:0px;left:200px;cursor:n-resize;'/> </div> 

Answer 1

尝试这个：

HTML：

<div id='editor' contenteditable='true' ></div>

CSS：

#editor{
     position:relative;
     width:400px;
     height:auto;
     border:1px solid black;
     word-wrap: break-word;
     padding-left:4px;
     padding-right:4px;
     padding-bottom: 1em;
     box-sizing:border-box;
     overflow-y:scroll;
     line-height: 1em;
     background: no-repeat center bottom url("http://s22.postimg.org/rh9bx9a3h/ind.png?noCache=1437598902");
  }

看看这个jsfiddle的实际效果： https ://jsfiddle.net/v4nwgcot/