CODEWITHSUNDEEP
javascripthtmlcss
AL-zami
AL-zami

Reputation: 9066

problems while trying to make a text editor

Here i am trying to make a text editor which has two characteristics.

  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)

I have put a down side indicator image at the bottom of the editor div. problem is:

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.

That's the overall situation.I tried my best to explain the problems.How can i fix this ? If there is any better way to do this please let me know.

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

Upvotes: 0

Views: 57

Answers (1)

Anthony Hilyard
Anthony Hilyard

Reputation: 1240

Try this:

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");
  }

Take a look at it in action with this jsfiddle: https://jsfiddle.net/v4nwgcot/

Upvotes: 1

Related Questions