2012-03-17 6 views
2

Я весь день просматривал SO и различные сайты, и я встречал многочисленные ответы, которые, вероятно, соответствуют моей проблеме, но у меня возникают проблемы с реализацией решение. Краткий обзор того, что я пытаюсь сделать:JavaScript window.getSelection() не может понять это

  1. Я построил редактор богатого текста.
  2. Мне нужна правильная обработка «вставленных» данных с прикрепленным к ней форматированием.
  3. Я отключил вставку через onpaste = "return false".
  4. На Ctrl + V скрытая текстовая область получает фокус, затем текст вставляется там пользователем, затем текст и значение сохраняются в редакторе (contentEditable div).
  5. Я могу сделать это в IE, но не все остальное.

Моя проблема: я не понимаю, как работает объект window.getSelection() для браузеров, совместимых со стандартами. Я хочу, чтобы вновь вставленный textarea.value был скопирован в мой редактор с помощью JavaScript с сохранением положения фокуса и курсора (каретки). Таким образом, мигающий курсор должен оставаться в конце пасты.

Я написал следующий код, который achives этой цели в IE, но не все остальное:

function handle_paste_keydown(key) 
{ 
    if(
     (key.keyCode == 86 || key.charCode == 86) && 
     (key.keyCode == 17 || key.charCode == 17 || key.ctrlKey) // if "Ctrl+V" is pressed. 
    ) 
    { 
     var get_paste_selection_range; 

     if(document.selection) 
     { 
      get_paste_selection_range = document.selection.createRange();     
      document.getElementById("paste_textarea").style.display = "block"; 
      document.getElementById("paste_textarea").focus();    

      document.getElementById("paste_textarea").onkeyup = function() 
      { 
       // insert the .value of the textarea at the cursor position in the editor. 
       get_paste_selection_range.text += document.getElementById("paste_textarea").value;    
       document.getElementById("paste_textarea").style.display = "none"; 

       // retain focus and cursor position      
       get_paste_selection_range.select();   
      } 
     } 
     else if(window.getSelection())  
     { 
      document.getElementById("paste_textarea").style.display = "block"; 
      document.getElementById("paste_textarea").focus(); 

      document.getElementById("paste_textarea").onkeyup = function() 
      { 
       // How do I handle this? 
       document.getElementById("paste_textarea").style.display = "none"; 
      } 
     } 
    } 
document.getElementById("paste_textarea").value = ""; 
} 

Cany кто поможет? Благодаря!

EDIT: Я добавил ссылку на живую версию, чтобы вы могли видеть, что происходит. Попробуйте это в Internet Explorer, а также в других браузерах, чтобы вы могли точно видеть, что происходит. Примечание. Я сделал скрытую текстовую область видимой в Ctrl + V, чтобы вы могли лучше просмотреть, что происходит, и удерживайте Ctrl + V, чтобы сохранить окно на экране.

http://gameprogrammingworkshop.com/Java/Stack%20Overflow%20Error!/index.php?id=null

ответ

0
... 
else if (window.getSelection) { 
    var selection = window.getSelection(), 
     get_paste_selection_range = selection.getRangeAt(0); 
    var new_text = selection.toString() + document.getElementById("paste_textarea").value; 

    // retain your focus 
} 
+0

Привет. Спасибо за ваш ответ, но я не могу заставить ваш код работать. Я пробовал уже несколько часов и не знаю, что делать. Я немного новичок в JavaScript, но я отредактировал свое оригинальное сообщение со ссылкой на живую версию моего кода, чтобы вы могли точно видеть, что происходит и чего я пытаюсь достичь. Если вы не можете/не хотите смотреть, спасибо за ваше время. – George88

Смежные вопросы