2012-05-24 2 views
4

Я пытаюсь создать редактируемый блок (вид richTextBox) с помощью html5 (contenteditable = "true") и jquery. Мне нужно выяснить положение каждого элемента внутри редактируемого div, чтобы я мог вставить разрыв страницы, как это делает слово Microsoft. Вот страница

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

Проблема заключается в том, что сигнал тревоги (item.position()) это ничего не выборки. Ошибка, возникающая в панели инструментов разработчика firefox, - «item.position не является функцией». Я предполагаю, что он должен что-то сделать с типом каждого элемента в $ ("# divEdit"). Find ("*"), поскольку все элементы разные. Любая помощь будет оценена по достоинству. Благодаря

ответ

6

Вы должны получить jQuery объект из item как position() является jQuery метод, следовательно, жалуются position() не является функцией

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

Или еще более кратким:

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

изменить на

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

Ну, вы ответили anyways bruv: P передо мной, так что здесь вы идете демо, которое я пытался сделать: http://jsfiddle.net/jJRJT/3/ может помочь! –

+0

Спасибо, ребята. Это сработало. Нужно получить мои основы JQuery правильно ..: P – pickhunter

0

Изменить данную строку

alert (item.position());

в

оповещения ($ (пункт) .position());