PDA

View Full Version : Very very basic & crossbrowser rich-text editor



orhun
12-16-2009, 10:30 PM
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
12-17-2009, 01:57 AM
Could try looking through this to see how nicedit does it.

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

jscheuer1
12-17-2009, 08:15 AM
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
12-17-2009, 11:25 AM
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
12-17-2009, 12:13 PM
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.