You must Sign In to post a response.
  • Category: ASP.NET

    How to get the ck editor word count while typing instead of displaying the count on button click

    After typing some text in ckeditor i am able to see the word count on button click but i need to view the word count while typing only.How can i do this.

    Below is my code which gives the word count on button click



    <body>
    <form id="form1" runat="server">
    <div>
    <CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server">
    </CKEditor:CKEditorControl>
    <asp:Button ID="btn1" runat="server" OnClick="btn1_Click" Text="Get Word Count" />
    <asp:Label ID="lbl1" runat="server"></asp:Label>
    </div>
    </form>
    </body>



    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btn1_Click(object sender, EventArgs e)
    {
    string whole_text = CKEditor1.Text;
    string trimmed_text = whole_text.Trim();

    // new line split here
    string[] lines = trimmed_text.Split(Environment.NewLine.ToCharArray());

    // don't need this here now...
    //string[] split_text = trimmed_text.Split(' ');

    int space_count = 0;
    string new_text = "";
    foreach (string line in lines)
    {
    // Modify the inner foreach to do the split on ' ' here
    // instead of split_text
    foreach (string av in line.Split(' '))
    {
    if (av == "")
    {
    space_count++;
    }
    else
    {
    new_text = new_text + av + ",";
    }
    }
    }

    new_text = new_text.TrimEnd(',');

    // use lines here instead of split_text
    lines = new_text.Split(',');
    lbl1.Text = lines.Length.ToString();
    }
  • #768832
    Hi,

    I feel you can perform this operation in javascript or jquery itself.

    <asp:TextBox ID="textTextBox" Text='<%# Bind("Text") %>' runat="server"
    CssClass="text smsTextBox" TextMode="MultiLine" Height="100px"
    MaxLength="500" >
    </asp:TextBox>



    The below jquery can be used in the Asp textbox,



    Jquery
    -------------------

    <script type="text/javascript">
    $(document).ready(function () {

    if (typeof $('.smsTextBox').val() !== "undefined") {
    var $remaining = $('.remaining'),
    $messages = $remaining.next();

    var chars = $('.smsTextBox').val().length,
    messages = Math.ceil(chars / 500),
    remaining = messages * 500 - (chars % (messages * 500) || messages * 500);

    $remaining.text(remaining + ' characters remaining');
    $messages.text(messages + ' message(s)');
    }

    });

    $(document).ready(function () {
    var $remaining = $('.remaining'),
    $messages = $remaining.next();

    $('.smsTextBox').keyup(function () {
    var chars = this.value.length,
    messages = Math.ceil(chars / 500),
    remaining = messages * 500 - (chars % (messages * 500) || messages * 500);

    $remaining.text(remaining + ' characters remaining');
    $messages.text(messages + ' message(s)');
    });
    });

    </script>

    Thanks,
    Mani

  • #768833
    i tried it but it is not working

  • #768834
    Are you sure the Jquery is called when the text box event happen?
    Make sure that you have reference all the .js file in the Jquery file.
    For a normal check, Create some click event in the button and call it in Jquery function and check it displays any msg. This is just for check to understand whether it is calling the jquery file.

    Thanks,
    Mani

  • #768835
    what i did is i added the code that you had provided this completed code
    <asp:TextBox ID="textTextBox" Text='<%# Bind("Text") %>' runat="server"
    CssClass="text smsTextBox" TextMode="MultiLine" Height="100px"
    MaxLength="500" >
    </asp:TextBox>



    The below jquery can be used in the Asp textbox,



    Jquery
    -------------------


    <script type="text/javascript">
    $(document).ready(function () {

    if (typeof $('.smsTextBox').val() !== "undefined") {
    var $remaining = $('.remaining'),
    $messages = $remaining.next();

    var chars = $('.smsTextBox').val().length,
    messages = Math.ceil(chars / 500),
    remaining = messages * 500 - (chars % (messages * 500) || messages * 500);

    $remaining.text(remaining + ' characters remaining');
    $messages.text(messages + ' message(s)');
    }

    });

    $(document).ready(function () {
    var $remaining = $('.remaining'),
    $messages = $remaining.next();

    $('.smsTextBox').keyup(function () {
    var chars = this.value.length,
    messages = Math.ceil(chars / 500),
    remaining = messages * 500 - (chars % (messages * 500) || messages * 500);

    $remaining.text(remaining + ' characters remaining');
    $messages.text(messages + ' message(s)');
    });
    });

    </script>
    i had used the above code as it is but its not working moreover i need to implement this for ckeditor not for textbox


Sign In to post your comments