jQuery - 复制文本并将其添加到光标当前所在的位置答案

【问题标题】：jQuery - Copy text and add it in the place where the cursor currently isjQuery - 复制文本并将其添加到光标当前所在的位置
【发布时间】：2021-12-12 10:28:22
【问题描述】：

我正在尝试复制文本，然后尝试将其添加到光标当前所在的位置。

基本上我正在尝试将右侧的文本添加到光标所在的 WordPress tinymce 编辑器中。

Please see the image here for reference

我尝试使用以下代码

function insertTextIntoFocusedTextFieldInOpener(text) {
  var field = window.opener.document.activeElement;
  if (field.tagName == "TEXTAREA" || (field.tagName == "INPUT" && field.type == "text" ) {
    insertAtCursor(field, text);
  }
}

调用下面的函数并发送文本和字段。

function insertAtCursor(myField, myValue) {
      var doc = myField.ownerDocument;
      //IE support
      if (doc.selection) {
        myField.focus();
        sel = doc.selection.createRange();
        sel.text = myValue;
      }
      //FF, hopefully others
      else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos) + 
                        myValue + myField.value.substring(endPos, myField.value.length);
      } 
      // fallback to appending it to the field
      else {
        myField.value += myValue;
      }
    }

但是当我点击添加按钮时它不会插入文本。

有人可以指导一个更好的替代解决方案吗？

【问题讨论】：

标签： javascript jquery cursor-position

【解决方案1】：

下面这一行完成了这项工作。

tinymce.activeEditor.execCommand('mceInsertContent', false, cleanhtml);

Onclick ADD 按钮的完整代码：

jQuery('#add_attribute').click(function() {
        var gethtml = jQuery("#hcf_show_attributes").html().replace('<br>','|');
        var cleanhtml = gethtml.replaceAll('<br>','|');
        tinymce.activeEditor.execCommand('mceInsertContent', false, cleanhtml);
    });

【讨论】：

【解决方案2】：

这是一个不使用 jQuery 的工作示例

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script>
        onload = () => {
            document.getElementById('button').addEventListener('click', () => {
                var text = document.getElementById('source').value;
                var target = document.getElementById('target');
                var selectionStart = target.selectionStart;
                target.value = target.value.substring(0, selectionStart) + text + target.value.substring(target.selectionEnd);
                target.selectionStart = target.selectionEnd = selectionStart + 1;
            });
        };
    </script>
</head>
<body>
    <div class="container">
        <div class="mb-3">
            <label for="source" class="form-label">Source</label>
            <input class="form-control" id="source" value="TEST" />
        </div>
        <div class="mb-3">
            <label for="target" class="form-label">Target</label>
            <textarea class="form-control" id="target" rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
        </div>
        <button type="button" class="btn btn-primary" id="button">Insert</button>
    </div>
</body>
</html>

【讨论】：

【解决方案3】：

很容易看到：

 <script>
     document.getElementById('button').addEventListener('click', () => {
        var text = document.getElementById('source').value;
        var main = document.getElementById('target');
        var cursorPosition = main.selectionStart;
        str1 = main.value.substring(0,cursorPosition);
        str2 = main.value.substring(cursorPosition,main.value.length);
        main.value = str1 ;var pos2 = main.selectionStart;
        main.value = main.value + text + str2 ; 
        main.selectionStart = main.selectionEnd = pos2;
    }
</script>

【讨论】：