contenteditable div get position position

Question

Я нашел фрагмент кода, который отлично работает, за исключением случаев, когда есть разрыв строки. Ввод ввода создает элемент html, и функция производит неправильный результат. Кто-нибудь с решением?

Я использовал следующий сценарий до сих пор: http://niichavo.wordpress.com/2009/01/06/contenteditable-div-cursor-position/

Answer 1

Вопрос ваш облицовочный из-за различий браузеров. Например, I.E добавит теги <p></p>, когда вы нажмете enter, а затем <br/> при нажатии shift-Enter. Chrome реализует <div>...</div> вокруг содержимого, когда вы нажимаете enter и <br/> при нажатии shift-Enter.

Вам необходимо обработать это путем записи событий нажатия клавиш или с помощью плагина jQuery, который позволит ввести стандарт нажатия клавиш в браузерах. Есть вопросы переполнения стека here и here, которые помогут.

Вот код, который я использовал для проверки этого.

<script type="text/javascript"> 
    $(function() { 
     $('#ShowButton').click(function (e) { 
      alert($('#CED').html()); 
     }); 
    });  
</script> 

<canvas id="drawingSurface" class="canvasLayout"> 

</canvas> 

<div id="CED" contenteditable="true"> 
    Text goes here 
</div> 

<input type="button" value="Show HTML" id="ShowButton" />