Very very basic & crossbrowser rich-text editor

[orhun]

i want to make an very very basic rich-text editor, which works in all browser types.

i have the code at below.. but it only works on -8 IE browsers.
could someone help me to make this code crossbrowser..

<script type="text/javascript">
<!--
function formatText (tag) {
var selectedText = document.selection.createRange().text;

if (selectedText != "") {
var newText = "[" + tag + "]" + selectedText + "[/" + tag + "]";
document.selection.createRange().text = newText;
}
}
//-->
</script>

<form name="my_form">
<textarea name="my_textarea"></textarea><br />
<input type="button" value="bold" onclick="formatText ('b');" />
<input type="button" value="italic" onclick="formatText ('i');" />
<input type="button" value="link" onclick="formatText ('link');" />
</form>

[bluewalrus]

Could try looking through this to see how nicedit does it.

http://js.nicedit.com/nicEdit-latest.js

[jscheuer1]

See this entire thread:

http://www.dynamicdrive.com/forums/showthread.php?t=50020

Nothing pretty, but it shows the basic cross browser methods for this sort of thing.

[orhun]

i did it like this... and its working crossbrowser..
but.. it's adding tags to the before/after to all writtens in textarea... (document.getElementById('textarea'))

It must add the tags before/after to the only sellected words..

could someone help me?


<script type="text/javascript">
<!--
function addtag(p_oObj, p_sText) {
p_oObj.value = '[' + p_sText + ']' + p_oObj.value + '[/' + p_sText + ']';
}
//-->
</script>

<button onclick="addtag(document.getElementById('textarea'),'b')">B</button><br/>
<textarea id="textarea" name="message" style="resize: vertical;" rows="12" cols="48"></textarea>

[jscheuer1]

All your doing there is just wrapping the value of the textarea. You are no longer even using any method to get the selected text.

Perhaps you should skip to the 'finished product' from the thread I mentioned:

http://www.dynamicdrive.com/forums/showpost.php?p=211683&postcount=33

The code is still pretty basic and short, the various methods required for a cross browser solution for this are clearly shown. If you really want to learn about it though, I suggest you read the entire thread. Shouldn't take more than 20 minutes, if that.