bold the selected text in textarea for firefox

[realin]

hi guys,

I am trying to make a simple text editor for IE and firefox using javascript. I want to know how can i bold the selected text and otehr stuff like italics and all. cause in IE i was able to do with the following lines.

[HTML]
if(document.selection){

var str=document.selection.createRange().text;
document.getElementById(txt).focus();
var sel=document.selection.createRange();
sel.text="<b>"+str+"</b>";


}

[/HTML]

But i what i am able to get for firefox is how to select the text, and how to set position of the caret using the following functions :-
[HTML]

document.getElementById(txt).selectionStart;

document.getElementById(txt).selectionEnd;

document.getElementById(x).setSelectionRange(0,3); \\to select text
[/HTML]

please help
thanks :)

[phvfl]

Hi,

The document.selection method is IE specific and so does not work in other browsers. The method is slightly more involved in non-IE browsers, assuming that your textarea had the id "textarea1" (original I know :)) this code would give an alert with the selected text:

var $obj = document.getElementById("textarea1")
alert($obj.value.substring($obj.selectionStart, $obj.selectionEnd))
 

The selectionStart and selectionEnd properties give the positions for the start of the selection and the end, which are then used to get the selection from the value of the textbox.

To reproduce the current behaviour in IE across browsers try:

function makeitbold(){
  var $tb = document.getElementById("textbox");
 
  if (document.selection){
    var str=document.selection.createRange().text;
    var sel=document.selection.createRange();
    sel.text="<b>"+str+"</b>";
  }else if (typeof $tb.selectionStart != 'undefined'){
    var $before, $after, $selection;
    $before= $tb.value.substring(0, $tb.selectionStart)
    $selection = $tb.value.substring($tb.selectionStart, $tb.selectionEnd)
    $after = $tb.value.substring($tb.selectionEnd, $tb.value.length)
 
    $tb.value= String.concat($before, "<b>", $selection, "</b>", $after)
  }
   $tb.focus();
 
}
 

I have selected the textarea into the variable $tb as it reduces the code required. This performs the same accross browsers except for one instance. When no text is selected in the textbox clicking a button to run the function behaves differently:

• IE - adds <b></b> to the button text
• Non-IE - adds <b></b> to the end of the textarea

Hope this covers everything, let me know if any of this is unclear

[veseffi]

Hi,

The document.selection method is IE specific and so does not work in other browsers. The method is slightly more involved in non-IE browsers, assuming that your textarea had the id "textarea1" (original I know :)) this code would give an alert with the selected text:

var $obj = document.getElementById("textarea1")
alert($obj.value.substring($obj.selectionStart, $obj.selectionEnd))
 

The selectionStart and selectionEnd properties give the positions for the start of the selection and the end, which are then used to get the selection from the value of the textbox.

To reproduce the current behaviour in IE across browsers try:

function makeitbold(){
  var $tb = document.getElementById("textbox");
 
  if (document.selection){
    var str=document.selection.createRange().text;
    var sel=document.selection.createRange();
    sel.text="<b>"+str+"</b>";
  }else if (typeof $tb.selectionStart != 'undefined'){
    var $before, $after, $selection;
    $before= $tb.value.substring(0, $tb.selectionStart)
    $selection = $tb.value.substring($tb.selectionStart, $tb.selectionEnd)
    $after = $tb.value.substring($tb.selectionEnd, $tb.value.length)
 
    $tb.value= String.concat($before, "<b>", $selection, "</b>", $after)
  }
   $tb.focus();
 
}
 

I have selected the textarea into the variable $tb as it reduces the code required. This performs the same accross browsers except for one instance. When no text is selected in the textbox clicking a button to run the function behaves differently:

• IE - adds <b></b> to the button text
• Non-IE - adds <b></b> to the end of the textarea

Hope this covers everything, let me know if any of this is unclear

Hi,
The code works in IE for Textareas,divs and spans, but only in a textarea in FireFox. I want the same code to work in IE and Firefox for normal text (like in a div or a span) such that onclick of a button, the selected text should come as alert message. could you please post the code for that?