Question

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

随着文字数量的增加，它会增加尺寸。

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

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

1.当文本到达底部时，它会与指示符图像进行交互。我希望它能以这样的方式使文本到达突然点时   在指标图像上方，它将向下扩展。

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

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

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

＆＃13;

 	  #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;
	  }

＆＃13;

<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>

＆＃13;

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/

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

1 个答案: