Question

Вопрос звучит долго, но я ищу реальное простое базовое решение.

HTML:

<textarea id="test">Hello world</textarea> 

        <a>change</a> 

JQuery:

$('a').click(function() { 

     var htmlString = '<div class="football"></div>' 
     var existing = jQuery('#test').text() 

     $('#test').append().text(existing + htmlString).html(); 

    }); 

Это добавляет существующий текст с моей htmlString переменной, для одного это, как я должен добавить htmlString в текстовом области, сохраняя при этом существующий контент, или есть лучший способ?

Также важно, чтобы я добавил htmlString, где находится курсор, это имеет смысл в моем живом коде, но вы должны понять, что этот вид разбивает мой код выше, строгая обе эти переменные. Так что я открыт для некоторых идей :)

Вот скрипка для вас, чтобы получить лучший визуальные о том, что этот код делает FIDDLE

Answer 1

Updated Demo

(function ($) { 
    $.fn.getCursorPosition = function() { 
     var input = this.get(0); 
     if (!input) return; // No (input) element found 
     if ('selectionStart' in input) { 
      // Standard-compliant browsers 
      return input.selectionStart; 
     } else if (document.selection) { 
      // IE 
      input.focus(); 
      var sel = document.selection.createRange(); 
      var selLen = document.selection.createRange().text.length; 
      sel.moveStart('character', -input.value.length); 
      return sel.text.length - selLen; 
     } 
    } 
})(jQuery); 

$('a').click(function() { 
    var htmlString = '<div class="football"></div>'; 
    var txt = $('#test').text(); 
    var cur_pos = $('#test').getCursorPosition(); 
    if (cur_pos != 0) { 
     $('#test').val(txt.substring(0, cur_pos) + htmlString + txt.substring(cur_pos + 1)); 
    }else{ 
     $('#test').val(htmlString + txt); 
    } 
});