Ajax HtmlEditorExtender的Key Up事件 [英] Key Up Event for Ajax HtmlEditorExtender

问题描述

我有以下内容：

I have the following :

<%@ 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>

现在 txtOnKeyPress 工作正常，当我删除评论 txtOnKeyPress 停止工作

我需要带有 TextEditor 的 JavaScript 代码。

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

推荐答案

最后，经过我所有的研究，我做到了。让我解释一下......

问题

当你使用 HtmlEditorExtender 时，<$隐藏了c $ c> TextBox1 。

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>

所以，当你附上一个 keyup 事件到那个 TextBox ，它不起作用。

方法

创建了许多新的 div 以方便编辑。输入文本的主 div 如下：

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; 类 = ajax__html_editor_extender_texteditor > < / div >

HtmlEditorExtenderBehavior_ExtenderContentEditable" style="height: 80%; overflow: auto; clear: both;" class="ajax__html_editor_extender_texteditor"></div>

因此，我们需要为此 div keyup c> only。

解决方案

为此，我们必须将以下脚本放在 Body 标签。把它放在 Head 标签中是行不通的，因为当时没有加载 HtmlEditorExtender 。

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 >

('.ajax__html_editor_extender_texteditor'); htmlEditorBox.keyup(function () { this.textContent = convertDigitIn(this.textContent); }); }); </script>

代码非常自我解释。它的类名获得主编辑 div 。然后根据你的逻辑来看它的内容。

注意

1.我已经测试了它并且工作正常。

2.不要忘记在 head 标记内包含 jQuery 文件。您也可以直接包含以下脚本...

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>

这篇关于Ajax HtmlEditorExtender的Key Up事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！