Textbox Highlight Text and Replacing 1

[gi11ies]

Hi

I posted this in the ASP.NET forum, but was told I'd probably get a better answer here to my problem.

Im trying to make a very basic text editor, that has image buttons for formatting the text. Just now I have if so if you want bold text ... you press the relevant image button and [[]b] goes into the textbox and when you finish the bold text you click it again [[]/b] goes into the text box.

I use this code.

Sub btnBold_Click (Sender as Object, e as ImageClickEventArgs)
    If Session("boldText") = "boldOff" then
        Dim textForBold As String = txtContent.text
        Dim textBoldStart As String = textForBold + "[[]b]"
        txtContent.text = textBoldStart
        lblStatus.Text = "Text Entry is Bold. (click on Bold Text button again to end Bold Text)"
        Session("boldText") = "boldOn"
    Else
        Dim textForBold As String = txtContent.text
        Dim textBoldEnd As String = textForBold + "[[]/b]"
        txtContent.text = textBoldEnd
        lblStatus.Text = "Text Entry is Normal."
        Session("boldText") = "boldOff"        
    End If
End Sub

I do replaces when the page is opened, ie [&#91;]b] is <b> and [&#91;]/b] is </b>.

What I want to do is use the cursor to highlight text in the textbox and press the bold image button and it will automatically make that text bold, by doing a replace in the textbox of the selected text putting in [&#91;]b] and [&#91;]/b]

for example

In the textbox

The dog ran after the ball.

If I selected 'dog ran after' so its highlighted, and then pressed the bold image button I created, it replaces the text to.

The [&#91;]b]dog ran after[&#91;]/b] the ball.

Does anyone have any tips on how to do this?

Gillies

 

[BillyRayPreachersSon]

I'd be taking a look at one of two products:

- TinyMCE, or
- FCKEdit

Both are FREE rich-text editors for multiple browsers, and you could either switch to using them, or look into their code to see how they achieve this.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[theniteowl]

gi11ies, you cannot alter the properties of text with the HTML text area so you cannot set text to bold, italic, different colors, etc. The only control for this is setting the properties on the textarea object itself and it applies to all of the text within that box.

The products Dan refers to above are rich text editors and do not rely on the HTML textarea object.
You can create one yourself by creating a virtual textarea, or in other words an area that by design looks like a textarea field but truly is not and therefor does not have the limitations of one.
To write one yourself can be a bit cumbersome especially if you want to support other browsers. You have to deal with key trapping and text selection events that work differently in different browsers.



Stamp out, eliminate and abolish redundancy!

 

[kaht]

This should answer your question (works in ie6 and ff1.5)

<script type="text/javascript">
function blah() {
   var ta = document.getElementById("test");
   if (document.selection) {
      str = document.selection.createRange().text 
      document.selection.createRange().text = "[ignore][b]" + str + "[/b][/ignore]";
      return true;
   }
   else if (ta.selectionStart) {
      var startPos = ta.selectionStart;
      var endPos = ta.selectionEnd;
      var str = ta.value.substring(startPos, endPos);
      ta.value = ta.value.substring(0, startPos) + "[ignore][b]" + str + "[/b][/ignore]" + ta.value.substring(endPos, ta.value.length);
      return true;
   }
   else {
      return false;
   }
}
</script>
<input type="button" value="Bold" onclick="blah()" />
<br />
<textarea id="test" style="height:150px">
This is a test to see if the bold tags will work.
</textarea>

However, dan and niteowl's suggestions above are probably the better route to take.

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[gi11ies]

Thanks for your replies everyone !!!

Kaht, your code does exactly what I wanted ... thank you soooooo much !!!!!!!!!!!


Gillies