Finally, after all my research, I did it. Let me explain...
Problem
When you use
HtmlEditorExtender
,
TextBox1
is hided.
<textarea style="height: 600px; width: 600px; display: none; visibility: hidden;" onkeyup="txtOnKeyPress(this);" id="TextBox1" cols="20" rows="2" name="TextBox1"></textarea>
So, when you attach a
keyup
event to that
TextBox
, it won't work.
Approach
Many new
divs
are created to facilitate the
Editor
. The main
div
where you enter the text is as follows.
<div contenteditable="true" id="TextBox1$HtmlEditorExtenderBehavior_ExtenderContentEditable" style="height: 80%; overflow: auto; clear: both;" class="ajax__html_editor_extender_texteditor"></div>
So, we need to provide
keyup
for this
div
only.
Solution
To do that, we have to place the below script inside
Body
tags. Putting this in
Head
tag will not work, as the
HtmlEditorExtender
is not loaded at that time.
<script type="text/javascript">
Sys.Application.add_load(function () {
var htmlEditorBox = $('.ajax__html_editor_extender_texteditor');
htmlEditorBox.keyup(function () {
this.textContent = convertDigitIn(this.textContent);
});
});
</script>
The code is quite self explanatory. It gets that main
Editor
div
by its class name. Then its content according to your logic.
Note
1. I have tested it at my end and it is working fine.
2. Don't forget to include the
jQuery file inside
head
tags. You can also directly include the below script...
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>