Fred Oz said:
Michael Winter wrote:
[...]
The document.selection.createRange method, as introduced by Microsoft,
reflects text selected by the user.
The document.createRange method, as introduced by the W3C, selects a
portion of the document tree, allowing you to manipulate it as a block
(essentially).
I'm trying to create an online text editor to supplement the PHP/MySql
content management system that we've already built. I don't know
Javascript all that well, so some of these questions may be stupid.
I changed the tabs to spaces in Microsoft Word, I hope Word doesn't
add any garbage characters.
I get no syntax errors in FireFox, but I'm not getting any selection
either. I'm not sure how to pass the right reference is in the html
form at bottom. How do I say, "Hey, I'm this element"??? And do I get
a string identifier that I could use in getElementById(), or is it a
number I could use to reference the right index in elements[]????
<script type="text/javascript">
function insertAtCursor(myField, tag) {
if (document.selection && document.selection.createRange) {
var range = document.selection.createRange();
if (range.parentElement() == element) range.text = '<' + tag
+ '>' + range.text + '<\/' + tag + '>';
} else if (myField && myField.selectionStart) {
// MOZILLA/NETSCAPE support
// textControl.value.substring(textControl.selectionStart,
textControl.selectionEnd)
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) +
myValue + myField.value.substring(endPos, myField.value.length);
} else if (document.forms[0].myField) {
myField.value += '<' + tag + '>' + range.text + '<\/' + tag
+ '>';
} else {
alert("Awful sorry, but this web broswer doesn't support the
operations of this button");
}
}
function wrapSelectionMakeALink (element) {
var range = document.selection.createRange();
address = prompt('What address?', '');
address = '<a href=\\\"' + address + '\\\">';
if (range.parentElement() == element) range.text = address +
range.text + '<\/a>';
}
function wrapSelectionInsertImage (element) {
var range = document.selection.createRange();
address = prompt('Add address for image. If the image is on
your site, look in Image Info.', '');
address = '<img src=\\\"' + address + '\\\">';
if (range.parentElement() == element) range.text = address +
range.text;
}
</script>
<form method="post" action="#">
<input type="button" value="bold"
onclick="insertAtCursor(document.forms[0].elements[this], 'b')" />
<input type="button" value="italic"
onclick="insertAtCursor(document.forms[0].elements[this], 'i')" />
<input type="button" value="blockquote"
onclick="insertAtCursor(document.forms[0].elements[this],
'blockquote')" />
<input type="button" value="big headline"
onclick="insertAtCursor(document.forms[0].elements[this], 'h2')" />
<input type="button" value="small headline"
onclick="insertAtCursor(document.forms[0].elements[this], 'h5')" />
<input type="button" value="make a link"
onclick="wrapSelectionMakeALink()" /> <p> sdfsd </p>
<textarea>Type something here, damnit</textarea> <p> sadfsdaf </p>
<input type="submit">
</form> <script type="text/javascript">
function insertAtCursor(myField, tag) {
if (document.selection && document.selection.createRange) {
var range = document.selection.createRange();
if (range.parentElement() == element) range.text = '<' + tag
+ '>' + range.text + '<\/' + tag + '>';
} else if (myField.selectionStart) {
// MOZILLA/NETSCAPE support
// textControl.value.substring(textControl.selectionStart,
textControl.selectionEnd)
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) +
myValue + myField.value.substring(endPos, myField.value.length);
} else if (document.forms[0].myField) {
myField.value += '<' + tag + '>' + range.text + '<\/' + tag
+ '>';
} else {
alert("Awful sorry, but this web broswer doesn't support the
operations of this button");
}
}
function wrapSelectionMakeALink (element) {
var range = document.selection.createRange();
address = prompt('What address?', '');
address = '<a href=\\\"' + address + '\\\">';
if (range.parentElement() == element) range.text = address +
range.text + '<\/a>';
}
function wrapSelectionInsertImage (element) {
var range = document.selection.createRange();
address = prompt('Add address for image. If the image is on
your site, look in Image Info.', '');
address = '<img src=\\\"' + address + '\\\">';
if (range.parentElement() == element) range.text = address +
range.text;
}
</script>
<form method="post" action="#">
<input type="button" value="bold"
onclick="insertAtCursor(document.forms[0].elements[this], 'b')" />
<input type="button" value="italic"
onclick="insertAtCursor(document.forms[0].elements[this], 'i')" />
<input type="button" value="blockquote"
onclick="insertAtCursor(document.forms[0].elements[this],
'blockquote')" />
<input type="button" value="big headline"
onclick="insertAtCursor(document.forms[0].elements[this], 'h2')" />
<input type="button" value="small headline"
onclick="insertAtCursor(document.forms[0].elements[this], 'h5')" />
<input type="button" value="make a link"
onclick="wrapSelectionMakeALink()" /> <p> sdfsd </p>
<textarea>Type something here, damnit</textarea> <p> sadfsdaf </p>
<input type="submit">
</form>