...

View Full Version : Javascript text editor script



TinyScript
03-25-2009, 02:26 AM
Hi guys, i stumbled onto this looking for something completely different, but I can't stop wanting to make it work. I'm sure there's some simple mistake, but I can't spot it. Can you look at the code and see it you can spot the problem?
It's a text editor test script that I found using google and I'd really like to get the tags working.



<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>HTML Editor</title>
<script lang="javascript" type="text/javascript" >

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 = document.getElementById('area').value;
//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;
}
</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>

TinyScript
03-25-2009, 09:25 PM
Heheh, I guess I did work, i just didn't know how to use it. But once i did figure it out, I got it working pretty good. I'm going to add more stuff to it. Any suggestions for what would be useful? I have to figure out a set of instructions to make menus,headers and other stuff too so it can be an element builder.
http://h1.ripway.com/tinyscript/htmledit/htmleditor.html
here's the script so far



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum