how to place div in textarea
Hi All,
i want to know whether is there any possible way to place a div tag inside textarea
the below code works like, if i type something and click bold first it will display <b>some text </b> and then if i press publish it will display at the bottom. what i want is, text with bold should come in textarea itself when i select text and click on bold or italic it should directly display in Textarea without pressing publish button. IS it possible?
I dont want use "iframe"
--------------------------------------html----------------------
<html>
<head>
<title>HTML Editor</title>
<script lang=javascript type=text/javascript src=htmleditor.js>
</script>
</head>
<body>
<input type=button id=btnBold value=B onclick=insertsBoldTag() />
<input type=button id=btnItalic value=I onclick=insertsItalicTag() />
<input type=button id=btnUnderline value=U onclick=insertsUnderlineTag() />
<input type=button id=btnDelete value=Del onclick=insertsDeleteTag() />
<br/>
<textarea id=area cols=35 rows=12 >
</textarea>
<p>
<input type=button id=btn value=Publish onclick=publish() />
<p>
<div id=showDiv>
</div>
</body>
</html>
------------------------------------************-----------------------
---------------------JS file------------------------------
var area;
var showDiv;
var formattedStr = "";
startPosition = 0;
var endPosition = 0;
window.onload = function()
{
area = document.getElementById("area");
showDiv = document.getElementById("showDiv");
};
function publish()
{
formattedStr = "<pre>"+document.getElementById("area").value+"</pre>";
showDiv.innerHTML = formattedStr;
}
function insertsBoldTag()
{
findPositions();
var text = area.value;
if (startPosition!=endPosition) {
var sbStr = text.substring(startPosition,endPosition);
sbStr = "<b>"+sbStr+"</b>";
fillsFormattedString(text,sbStr);
}
}
function insertsItalicTag()
{
findPositions();
var text = area.value;
if (startPosition!=endPosition) {
var sbStr = text.substring(startPosition,endPosition);
sbStr = "<i>"+sbStr+"</i>";
fillsFormattedString(text,sbStr);
}
}
function insertsUnderlineTag()
{
findPositions();
var text = area.value;
if (startPosition!=endPosition) {
var sbStr = text.substring(startPosition,endPosition);
sbStr = "<u>"+sbStr+"</u>";
fillsFormattedString(text,sbStr);
}
}
function insertsDeleteTag()
{
findPositions();
var text = area.value;
if (startPosition!=endPosition) {
var sbStr = text.substring(startPosition,endPosition);
sbStr = "<del>"+sbStr+"</del>";
fillsFormattedString(text,sbStr);
}
}
function findPositions()
{
var text = area.value;
if (document.selection) {
// Internet Explorer
var range = document.selection.createRange();
var dpl = range.duplicate();
if (range.text.length > 0) {
dpl.moveToElementText(area);
dpl.setEndPoint("EndToEnd", range);
startPosition = dpl.text.length-range.text.length;
endPosition = startPosition + range.text.length;
}
}
else {
// Mozilla Firefox
startPosition = area.selectionStart;
endPosition = area.selectionEnd;
}
}
function fillsFormattedString(text, selectedText)
{
// split textarea value into three pieces: before startPosition,
// startPosition until endPosition, and after endPosition
var str1 = text.substring(0,startPosition);
var str2 = text.substring(startPosition,endPosition);
var str3 = text.substring(endPosition,text.length);
// replace str2 with formatted substring (selectedText)
str2 = selectedText;
// form the new string
formattedStr = str1+str2+str3;
area.value = formattedStr;
}
------------------------
CSS Codes
Reply With Quote
Bookmarks