Key Up Event for Ajax HtmlEditorExtender

Question

0.00/5 (No votes)

See more:

I have the following :

XML

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    UICulture="ar-SA" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
    TagPrefix="cc1" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    &nbsp;<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        function txtOnKeyPress(txt1)
         {
//            if (txt1 != 'undefined')
             //            {

             txt1.value = convertDigitIn(txt1.value);

//            }
         }

//Assuming that the number you wish to convert is already in a string, then something like the following snippet of code will work:

function convertDigitIn(enDigit){ // PERSIAN, ARABIC, URDO
    var newValue="";
    for (var i=0;i<enDigit.length;i++)
    {
        var ch=enDigit.charCodeAt(i);
        if (ch>=48 && ch<=57)
        {
            // european digit range
            var newChar=ch+1584;
            newValue=newValue+String.fromCharCode(newChar);
        }
        else
            newValue=newValue+String.fromCharCode(ch);
    }
    return newValue;
}
    </script>
    <asp:TextBox ID="TextBox1" runat="server" onkeyup="txtOnKeyPress(this);"
        TextMode="MultiLine" Height="600px" Width="600px" ></asp:TextBox>

 <%--
    <asp:HtmlEditorExtender ID="htmlEditorExtender1" TargetControlID="TextBox1"
        runat="server" EnableSanitization="false" >
    </asp:HtmlEditorExtender>  --%>

</asp:Content>

Now txtOnKeyPress is working fine when I remove the comments the txtOnKeyPress stop working
I need the JavaScript code with TextEditor too.

Posted 11-Dec-13 2:56am

Hamza Dweikat

Updated 11-Dec-13 20:07pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v2

Add a Solution

Comments

JoCodes 11-Dec-13 22:51pm

When removing which comments? if (txt1 != 'undefined')?

JoCodes 11-Dec-13 22:53pm

Any reason not using OnClientChange event of the editor?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-13 2:00am

Please check my answer. :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-13 2:00am

Please check my answer. :)

Hamza Dweikat 16-Dec-13 8:57am

I have problem when I press enter no new line create and the the text dosent wrab ?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2013-12-11T19:59:00

Solution 1

Finally, after all my research, I did it. Let me explain...

Problem

When you use HtmlEditorExtender, TextBox1 is hided.

HTML

<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.

HTML

<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.

HTML

<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...

HTML

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Posted 11-Dec-13 19:59pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

Hamza Dweikat 12-Dec-13 2:48am

Thanks It's Working :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-13 2:50am

Glad to hear that. :) Please up-vote and accept the answer.

Thanks,
Tadit.

RaisKazi 12-Dec-13 10:09am

My 5! Very well explained.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Dec-13 12:49pm

Thanks a lot. :) :)

VICK 23-Dec-13 7:52am

Hi Tadit Dash..
I am trying to bind a textbox enter key event with button click by doing the following in PageLoad


txtMsg.Attributes.Add("onkeydown",
                "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('" + btnSend.UniqueID + "').click();return false;}} else {return true}; ");

and that is working fine.. that when i write anything in textbox and click enter. it raised the button click event.
But now i wana use HTML EDITOR EXTENDOR of ajax.
and I have tried your solution but unable to understand and implement it completely.

SO can you guide me a bit more???

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-Dec-13 8:27am

So, what is the problem and what you did not understand exactly?

VICK 25-Dec-13 3:15am

how can i use the above mentioned code snippet in collaboration with your soluion to raise the Extender's event??

as currently I am doing the above on page load. so can u define completely?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 25-Dec-13 3:55am

See the code under "Solution" heading. It does for keyup...

htmlEditorBox.keyup(function () {
this.textContent = convertDigitIn(this.textContent);
});

For Keydown, do like below...

htmlEditorBox.keydown(function (event) {
if(event.which || event.keyCode)
{
if ((event.which == 13) || (event.keyCode == 13))
{
document.getElementById('btnSend').click();
return false;
}
}
else
{
return true
}
});

VICK 25-Dec-13 23:34pm

Thanks.. Done.. working fine.. but I have to move the script tag at the end of the </form> and before ending of body tag... :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 26-Dec-13 1:31am

Yes, you have to place inside body tags after the definition of HtmlEditorExtender because it will work only after that Editor is loaded, which I have already pointed out in my answer.

Good work, keep coding. :)

Thanks,
Tadit