[RESOLVED] Text Input and editing

[GremlinSA]

I'm busy building up a Web User Control that accepts some text input, and I need to include some basic text editing buttons to the control, something simular to the buttons on the message post page used here on CG.

I've spent the last few days searching CG and the net, but have not found a suitable solution..

To give an example of what i need to do ...

Think of making a post here, you highlight a section of text, and click the bold button, and the textbox now shows <B>some text</B>

Now preferably i'd like to do this on the client side (javascripts) however the scripts i have as samples do not link into my textbox or textarea controls.

I've also tried by using the postback method's and doing the editing on the serverside with VB, however neither the textbox or textarea controls have any methods resembling selectedtext or selectionstart, selectionlength, to allow me to identify the highlighted text and insert the required prefix and suffix.

Any help would be greatly apreciated..

Thanks.

Gremmy...

[Shuja Ali]

So you are looking for a WYSIWYG editor, sometime back I posted alink to an article on Codeproject. Here is the thread http://www.codeguru.com/forum/showthread.php?t=432477

[GremlinSA]

Thanks .. I'm getting the project (as soon as i can find my code project login ??? )

[HanneSThEGreaT]

Hey Gremmy, howzit going ¿

I took the liberty of downloading it for you

In case you couldn't find your login details

[GremlinSA]

Thanks Hannes...it's help me out ... in there i found a helpfull function..

document.getElementById([name])

I've included it into my javascripts, and now they are working in IE ..

However in Firefox there is still no luck....

This is the ASP code snip that i've been using to test simple functions...

    <script language="JavaScript" type="text/javascript" src="/js/inc_code.js"></script>
<asp:Panel ID="Panel1" runat="server"  Width="100%">
  <table width="100%">
  <tr>
  <td></td>
    <td width="80%">
        <a href="Javascript:bold();" tabindex="-1"><img src="/images/forum/icon_editor_bold.gif" alt="Bold" title="Bold" width="23" align="top" border="0" height="22" /></a>
        <a href="Javascript:italicize();" tabindex="-1"><img src="/images/forum/icon_editor_italicize.gif" alt="Italicized" title="Italicized" width="23" align="top" border="0" height="22" /></a>
        <a href="Javascript:underline();" tabindex="-1"><img src="/images/forum/icon_editor_underline.gif" alt="Underline" title="Underline" width="23" align="top" border="0" height="22" /></a>
        <a href="Javascript:hyperlink();" tabindex="-1"><img src="/images/forum/icon_editor_url.gif" alt="Insert Hyperlink" title="Insert Hyperlink" width="23" align="top" border="0" height="22" /></a>
        <a href="Javascript:image();" tabindex="-1"><img src="/images/forum/icon_editor_image.gif" alt="Insert Image" title="Insert Image" width="23" align="top" border="0" height="22" /></a>
        <a href="Javascript:quote();" tabindex="-1"><img src="/images/forum/icon_editor_quote.gif" alt="Insert Quote" title="Insert Quote" width="23" align="top" border="0" height="22" /></a>
    </td>
    <td width="10%"></td>
  </tr>
    <tr >
  <td></td>
    <td>
        <textarea name="Message" cols="50" rows="6" style="width: 100%;" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);"></textarea>
        </td>
  <td></td>
   
  </tr>
  </table>
</asp:Panel>

this is the javascript in inc_code.js

function AddText(text) {
	var tarea = document.getElementById("Message");
	if (typeof tarea.selectionStart != 'undefined'){ // if it supports DOM2
		start = tarea.selectionStart;
		end = tarea.selectionEnd;
		tarea.value = tarea.value.substr(0,tarea.selectionStart)
			+ text + tarea.value.substr(tarea.selectionEnd);
		tarea.focus();
		tarea.selectionStart = ((start - end) == 0) ? start + text.length : start;
		tarea.selectionEnd = start + text.length;
	} else {
		if (tarea.createTextRange && tarea.caretPos) {
			var caretPos = tarea.caretPos;
			caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?   text + ' ' : text;
		}
		else {
			tarea.value += text;
		}
		tarea.focus(caretPos);
	}
}

function getText() {
	var tarea = document.getElementById("Message");
	if (tarea.createTextRange && tarea.caretPos) {
		return tarea.caretPos.text;
	} else if (typeof tarea.selectionStart != 'undefined'){
		return tarea.value.substr(tarea.selectionStart,tarea.selectionEnd-tarea.selectionStart)
	}
	return '';
}

function bold() {
	var text = getText();
		if (text) {
			txt=text;
		} else {
			txt=prompt("Text to be made BOLD.","Text");
		}
		if (txt!=null) {
			AddTxt=""+txt+"";
			AddText(AddTxt);
		}
}

function italicize() {
	var text = getText();
		if (text) {
			txt=text;
		} else {
			txt=prompt("Text to be italicized","Text");
		}
		if (txt!=null) {
			AddTxt=""+txt+"";
			AddText(AddTxt);
		}
}

function underline() {
	var text = getText();
		if (text) {
			txt=text;
		} else {
			txt=prompt("Text to be Underlined.","Text");
		}
		if (txt!=null) {
			AddTxt=""+txt+"";
			AddText(AddTxt);
		}
}

function storeCaret(ftext) {
	if (ftext.createTextRange) {
		ftext.caretPos = document.selection.createRange().duplicate();
	}
}

At least it's a jump into the right direction, now if i can just figure out what is so different between IE and FF that it only works in one ... (and FF is the one without a Java Debugger)

Gremmy...

[GremlinSA]

So i've been spending time trying to figure this out.. and although FF does not have a Debugger, it does have a script error console, like an idiot i missed it.. ..

however it did return this error tarea is null..

also looks like FF does not always like the implementation of getElementById so i redid some of the scripts and now have a workable script that runs if FF .....

i commented out the getelementbyid line

function AddText(text) {
	// var tarea = document.getElementById('Message');
	if (typeof tarea.selectionStart != 'undefined'){ // if it supports DOM2
		start = tarea.selectionStart;
		end = tarea.selectionEnd;
		tarea.value = tarea.value.substr(0,tarea.selectionStart)
			+ text + tarea.value.substr(tarea.selectionEnd);
		tarea.focus();
		tarea.selectionStart = ((start - end) == 0) ? start + text.length : start;
		tarea.selectionEnd = start + text.length;
	} else {
		if (tarea.createTextRange && tarea.caretPos) {
			var caretPos = tarea.caretPos;
			caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?   text + ' ' : text;
		}
		else {
			tarea.value += text;
		}
		tarea.focus(caretPos);
	}
}

function getText() {
	// var tarea = document.getElementById('Message');
	if (tarea.createTextRange && tarea.caretPos) {
		return tarea.caretPos.text;
	} else if (typeof tarea.selectionStart != 'undefined'){
		return tarea.value.substr(tarea.selectionStart,tarea.selectionEnd-tarea.selectionStart)
	}
	return '';
}

and simply set the Tarea to the control in the storecaret function..

function storeCaret(ftext) {
	tarea = ftext;
	if (ftext.createTextRange) {
		ftext.caretPos = document.selection.createRange().duplicate();
	}
}

Not that i understand Java that well, but it looks like this wont break too easy... (as long as i only have 1 editable textarea on the page...)

now that this works i can carry on...

Gremmy