Home/ Questions/Q 7993179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T13:46:31+00:00

I am trying to make an editable box (kind of a richTextBox) using html5

  • 0

I am trying to make an editable box (kind of a richTextBox) using html5 (contenteditable=”true”) and jquery. I need to find out position of each element inside the editable div so that I can insert a page break like microsoft word does.
Here is the page

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>jQuery Context Menu Plugin Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

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


    <script type="text/javascript"> 
        $(document).ready( function() {
            $("#divEdit").keyup(function(){
                $.each($("#divEdit").find("*"), function(i,item){
                    alert(item.position());
                });
            });             
        });
    </script>
</head>

<body>

    <h1>jQuery Context Menu Plugin and KendoUI Demo</h1>
    <div style="width:740px;height:440px" contenteditable="true" id = "divEdit">
        <p>
            <img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
        </p>
        <p>
            Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
            In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
            and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
            accessibility standards and provides API for content manipulation.
        </p>

        <p id="para">Features include:</p>
        <ul>
            <li>Text formatting & alignment</li>
            <li>Bulleted and numbered lists</li>
            <li>Hyperlink and image dialogs</li>
            <li>Cross-browser support</li>
            <li>Identical HTML output across browsers</li>
            <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
        </ul>
        <p>
            Read <a href="http://www.kendoui.com/documentation/introduction.aspx">more details</a> or send us your
            <a href="http://www.kendoui.com/forums.aspx">feedback</a>!
        </p>
    </div>
</body>

The problem is that alert(item.position()) is not fetching anything. The error that comes in firefox developer toolbar is ‘item.position is not a function’.
My guess is that it has to do something with the type of each element in $(“#divEdit”).find(“*”) as all the elements are different.
Any help would be appreciated.
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to get the jQuery object out of item, as position() is a jQuery method, hence the complain about position() is not a function

    $(item).position() // instead of item.position()

    Or even more concise:

    $.each($("#divEdit").find("*"), function(i,item){
   alert(item.position());
}

    change to

    $('#divEdit').find('*').each(function() { 
   alert($(this).position());
})
    • 0