Перетаскивание картинок и ссылок в textarea

212

12 сентября 2018, 06:50

Есть textarea. Если перетащить в нее картинку или ссылку, то в том месте, где отпустим мышь появится выделенный полный путь.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<textarea height="50" id="text">something text</textarea> 
<p><img src="http://lorempixel.com/400/200/" alt="image"></p> 
<p><a href="http://example.com">link</a></p>

Как вмешаться в этот процесс, получить этот путь и видоизменить его, например обернуть в скобки перед вставкой?

При этом важно, чтобы он вставлялся именно туда, куда его «дропаешь», а не в конец textarea и НЕ хочется использовать jQuery.UI

Answer 1

/* 
  Получение информации об объекте перетаскивания и 
  использование её для вставки в текстовое поле. 
  No JQ. JS only. 
*/ 
 
var oTextarea = document.querySelector('#text'); 
var sOriginalText, sInsertText; 
 
document.addEventListener('dragstart', function(event) { 
  // Запоминаем исходный текст "textarea" 
  sOriginalText = oTextarea.value; 
  // Получаем от захваченного элемента данные 
  // (здесь можно вносить нужные изменения и получить  
  // различную информацию об объекте перетаскивания) 
  sInsertedText = event.target.outerHTML || window.getSelection().toString(); 
  // Проверка на перетаскивание текста внутри "textarea" 
  if (event.target == oTextarea) { 
    sInsertedText = window.getSelection().toString(); 
  } 
}); 
 
document.addEventListener('drop', function(event) { 
  let data = event.dataTransfer.items; 
  for (let i = 0; i < data.length; i++) { 
    if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { 
      data[i].getAsString(function(str) { 
        // Получаем изменённый текст "textarea" 
        let sChangedText = oTextarea.value; 
        // Получаем длину изменённого текста 
        let nChangedLen = sChangedText.length; 
        // Получаем длину исходного текста 
        let nOriginalLen = sOriginalText.length; 
        // Позиция каретки 
        let nCarretPos; 
        // Ищем изменения одновременно... 
        for (let i = 0; i < nOriginalLen; i++) { 
          // ... с начала 
          if (sChangedText[i] != sOriginalText[i]) { 
            nCarretPos = i; 
            break; 
          } 
          // ...и с конца 
          if (sChangedText[nChangedLen - 1 - i] != sOriginalText[nOriginalLen - 1 - i]) { 
            nCarretPos = nOriginalLen - i; 
            break; 
          } 
        } 
 
        // (Здесь любые манипуляции с sInsertedText: replace и т.п.) 
 
        // Заносим готовый текст в "textarea" 
        oTextarea.value = sOriginalText.substring(0, nCarretPos) + 
          sInsertedText + 
          sOriginalText.substring(nCarretPos); 
        // Выделяем изменения 
        oTextarea.focus(); 
        oTextarea.setSelectionRange( 
          // (Если приплюсовать длину, то каретка встанет в конец вставки, ничего не выделяя) 
          nCarretPos, 
          // (Если не плюсовать длину, то каретка встанет в начало вставки, ничего не выделяя) 
          nCarretPos + sInsertedText.length 
        ); 
      }); 
    } 
  } 
}); 
// Сброс (для удобства демо) 
var sSourceText = oTextarea.value; 
document.querySelector('button').addEventListener('click', function() { 
  oTextarea.value = sSourceText; 
});

<textarea id="text" style="width: 320px; height: 115px; border: 1px solid #fa0; float: left; margin-right: 10px;">Если убрать из скрипта "setSelectionRange", то каретка, после вставки, будет помещена в самый конец всего текста.</textarea> 
<p><img src="http://lorempixel.com/160/120/" alt="image"></p> 
<p><a href="http://example.com">Ссылка</a> Просто текст <button>Сброс</button></p> 
<p></p>