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

#javascript #jquery #drag_n_drop #textarea

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




something text

link




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

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

Ответы

Ответ 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;
});
Если убрать из скрипта "setSelectionRange", то каретка,
после вставки, будет помещена в самый конец всего текста.

Ссылка Просто текст