javascript - 尝试制作文本编辑器时遇到的问题

Question

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

1. It will increase size with the increasing amount of text .

2.It can be pulled up or down with mouse( i haven't implemented it yet,so it is out of question now)

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

1.When text reaches at the bottom it interacts with the indicator image.I want it in such a way so that,when text reaches a sudden point above the indicator image it will expand downward.

2.indicator image comes after i enter a character in the editor.I want it to appear from the beginnning.

3.There is an issue with ENTER key.The text pointer comes to the image and new line is added with the second 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/