alzami Posted December 25, 2013 Share Posted December 25, 2013 (edited) trying to make a text editor.the "creatdiv" button is used to make a paragraph inside the iframe editor.but while typing inside the paragraph the texts overflows and spill out of the paragraph boundary.so my question is how can i manage to force the text to remain inside the paragraph boundary.and also want the paragraph boundary will increase along Y-direction as the amount of texts inside is being increased <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>a { cursor:pointer; text-decoration:none;}img{ width:16px; height:16px;}#hide{ position:absolute; width:50px; height:50px; background-color:pink; border:1px solid black; top:210px; left:660px; padding:1px; display:none;}</style></head><body onLoad="loads();" style="position:relative;"><iframe id="idContent" width="600" height="280" contenteditable="true" ></iframe><input type="button" value="B" onClick="bolds();"><input type="button" value="l" onClick="ilink();"><input type="button" value="color" onClick="show();"><input type="button" value="UL" onClick="ul_list();"><input type="text" value="" list="datalist1" id="ff" /><datalist id="datalist1"><option value="1" ><option value="2" ><option value="3" ><option value="4" ><option value="5" ><option value="6" ><option value="7" ></datalist><input type="button" value="< font size" onClick="isize(ff.value);"><input type="button" value="creatdiv" onClick="crtdiv();"><div id="hide"><img src="yellow.jpg" onClick="icolor('yellow');"/><img src="red.jpg" onClick="icolor('red');"/><img src="violet.jpg" onClick="icolor('violet');"/><img src="black.jpg" onClick="icolor('black');"</div><script>var p=0;function loads(){ idContent.document.designMode="On";}function bolds(){ idContent.document.execCommand("bold",false,null);}function ilink(){ var m = prompt("put url here"); idContent.document.execCommand("CreateLink",false,m);}function show(){ var m=document.getElementById("hide"); m.style.display="block";}function icolor(col){ var m=document.getElementById("hide"); if(p==1){ idContent.document.execCommand("forecolor",false,'black'); p=0; } else{ idContent.document.execCommand("forecolor",false,col); setTimeout(function(){ m.style.display="none"; },5000); p=1;} }function ul_list(){ idContent.document.execCommand("InsertUnorderedList",false,null);}function isize(el){ idContent.document.execCommand("FontSize",false,el);}function crtdiv(){ var para=document.createElement("p"); para.innerHTML="dfdfdfdfkdf"; para.setAttribute('style',"background-color:green;background-image:url(image1.jpg);border-radius:10px;border:1px solid black"); idContent.document.body.appendChild(para); }</script></body></html> creatdiv function here function crtdiv(){ var para=document.createElement("p"); para.innerHTML="dfdfdfdfkdf"; para.setAttribute('style',"background-color:green;background-image:url(image1.jpg);border-radius:10px;border:1px solid black"); idContent.document.body.appendChild(para); } Edited December 25, 2013 by alzami Link to comment Share on other sites More sharing options...
davej Posted December 25, 2013 Share Posted December 25, 2013 What? Like this? https://thenewcircle.com/s/post/1096/samples/try6.htm Link to comment Share on other sites More sharing options...
alzami Posted December 26, 2013 Author Share Posted December 26, 2013 yes something lyk that! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now