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

problems while trying to make a text editor

本文关键字：遇到 问题 编辑器 作文本      更新时间：2023-09-26

在这里我试图使一个文本编辑器有两个特点。

  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>

试试这个:

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/

相关文章：