主页 / 问题 / 857030
Accepted
Talleyran
Asked:2020-07-18 15:47:12 +0000 UTC2020-07-18 15:47:12 +0000 UTC

将图像和链接拖入文本区域

  • 772

有文本区域。如果您将图像或链接拖入其中，则突出显示的完整路径将出现在您释放鼠标的位置。

<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>

如何干预这个过程，得到这个路径并修改它，例如在插入之前用括号括起来？

同时，重要的是它被插入到你“放置”它的确切位置，而不是在文本区域的末尾，你不想使用 jQuery.UI

javascript

1 个回答

  1. Best Answer

    /*
  Получение информации об объекте перетаскивания и
  использование её для вставки в текстовое поле.
  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>

    • 3

相关问题