Replacing Slected Text oe Bold,Italic... 1

[werD420]

Helo im creating a simple text editor in which the user can bold some text for a page. I call it like so

<input type="button" id="Button1" value="Bold" onclick="bold(document.selection.createRange().text)" />

and bold is as folows

function bold(SelectedText){
  if(IsDesign){var currentText = document.getElementById("Designview").innerHTML;} else {var source = document.getElementById("htmlview").value;};
  UpdatedText = currentText.replace(SelectedText,'<B>' + SelectedText + '</B>'); 
  alert(UpdatedText);
  return UpdatedText;  
  }

I thought it was working until i noticed the fundamental flaw..

If text is "Friggin right!" and i select "rig" from the word "right" then the text comes back

"F<B>rig</B>gin right"

i know of using g and i for global and insensitive casing but i cant seem to find a way around this. Does any one else know a way?

Thanks alot for any help.


MCP, .Net Solutions Development <%_%>

 

[cLFlaVA]

take a look here. it shows you how to do what you need, and, in addition, shows you how to make your code compatible in other browsers as well, rather than just IE.



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[werD420]

Thanks fo the link, this is dedicated to a company intranet and its IE only so im not trying to add unneeded code.

here is what i have thanks to the link you gave me, But it appears that the if statement in function "bold" isnt hitting right.. also this method replaces the line in my div as &lt;B&gt;rig &lt;/B&gt; which is not what i need..

It also seems that for some reason when i go to source view ie textarea not div i get

Cant move focus to control as its invisible not enabled or of a type that doesnt accept focus heres my code with the changes and bold function bolded

var IsDesign = 'true';
    function source() {
    var IsDesign='false';
    var design = document.getElementById("Designview").innerHTML;
    var source = document.getElementById("htmlview");
    source.value = design;
    document.getElementById("Designview").style.display = 'none';
   document.getElementById("htmlview").style.display = 'inline';
    document.getElementById("btnHtml").style.display = 'none';
    document.getElementById("btnDesign").style.display = 'inline';
    }
     function design() {
    var IsDesign='true';
    var design = document.getElementById("Designview");
    var source = document.getElementById("htmlview").value;
    design.innerHTML = source
   document.getElementById("Designview").style.display = 'inline';
   document.getElementById("htmlview").style.display ='none';
    document.getElementById("btnHtml").style.display ='inline';
    document.getElementById("btnDesign").style.display = 'none';
    }
  [b]function bold(SelectedText){
  if(IsDesign=='true'){
  document.getElementById("DesignView").focus();
  } else {
  document.getElementById("htmlview").focus();
  }
  
  var sel = document.selection.createRange();
  sel.text = '<B>' + SelectedText + '</B>';
  return;  
  
  }[/b]

MCP, .Net Solutions Development <%_%>

 

[cLFlaVA]

werD,

the if statement is most likely not hitting right because you are re-defining your isDesign variable inside the source function. try removing the "var" before the isDesign in the source function.

you cannot set focus on an object that is hidden using css. again, this error may go away once you correct what i suggested in the paragraph above.

lastly, can you post your entire page, so i can better help you clear up the &lt;B&gt;rig &lt;/B&gt; issue?



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[werD420]

Thanks clFlaVA!
I removed the var declarations and it did fix the hidden error but i am still getting &lt; &gt;
here is the code from my page

   <title>Editing</title>

    <script language="javascript">
    var IsDesign = 'true';
    function source() {
    IsDesign='false';
    var design = document.getElementById("Designview").innerHTML;
    var source = document.getElementById("htmlview");
    source.value = design;
    document.getElementById("Designview").style.display = 'none';
   document.getElementById("htmlview").style.display = 'inline';
    document.getElementById("btnHtml").style.display = 'none';
    document.getElementById("btnDesign").style.display = 'inline';
    }
     function design() {
    IsDesign='true';
    var design = document.getElementById("Designview");
    var source = document.getElementById("htmlview").value;
    design.innerHTML = source
   document.getElementById("Designview").style.display = 'inline';
   document.getElementById("htmlview").style.display ='none';
    document.getElementById("btnHtml").style.display ='inline';
    document.getElementById("btnDesign").style.display = 'none';
    }
  function bold(SelectedText){
  if(IsDesign=='true'){
  document.getElementById("DesignView").focus();
  } else {
  document.getElementById("htmlview").focus();
  }
  
  var sel = document.selection.createRange();
  sel.text = '<B>' + SelectedText + '</B>';
  return;  
  
  }

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <h2>
            Editable</h2>
        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
            <tr>
                <td colspan="2" style="height: 2px">
                   Edit<br />
                     <input type="button" id="btnDesign" value="Design" style="display:none;" onclick="design()" />
                     <input type="button" id="btnHtml" value="Source" onclick="source()" />
                     <input type="button" id="Button1" value="Bold" onclick="javascript:if(document.selection.createRange().text){bold(document.selection.createRange().text)}else{return false;}" />
                    
                </td>
            </tr>
            <tr>
                <td style="width: 910px; height: 26px">
                    &nbsp; <div id="DesignView" contenteditable="true">
                        <b>frigin right</b>
                    </div>
                    <textarea id="htmlview" style="width: 878px; height: 260px; display:none;"></textarea></td>
                <td style="height: 26px">
                    html</td>
            </tr>
        </table>
    </form>
</body>
</html>

MCP, .Net Solutions Development <%_%>

 

[cLFlaVA]

? this works as expected for me...



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[werD420]

Hmm.. If i type hello into the div then select it and hit bold i receive this in source view

<B>frigin right</B>&nbsp;&nbsp; &lt;B&gt;hello&lt;/B&gt;

This makes the actual output look like

[b]friggin right[/b]  <B>hello</B>

Is this the same result you have?

MCP, .Net Solutions Development <%_%>

 

[cLFlaVA]

sorry, now i see the problem...

try this:

function bold(SelectedText){
  if(IsDesign=='true'){
    document.getElementById("DesignView").focus();
    var sel = document.selection.createRange();
    sel.pasteHTML('<B>' + SelectedText + '</B>');
  } else {
    document.getElementById("htmlview").focus();
    var sel = document.selection.createRange();
    sel.text = '<B>' + SelectedText + '</B>';
  }
}

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

is this what you were looking for?



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[werD420]

That is Exactly What I was Looking For

Thank you so much! I was at a loss when I got up this morning now I can really get to crackin on this!

Thanks Again!

MCP, .Net Solutions Development <%_%>

 

[cLFlaVA]

not a prob.



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]