jQuery - Copy text and add it in the place where the cursor currently is

Question

jQuery - Copy text and add it in the place where the cursor currently is

344 Views Asked by Thowzif Abdullah At 12 December 2021 at 10:28

I'm trying to copy text and then trying to add it in the place where the cursor currently is.

Basically i'm trying to add the text from the right hand side to the WordPress tinymce editor, where the cursor is.

I tried using the below code

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

which calls the below function and sends the text and field.

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

But it doesn't insert the text when i click the ADD button.

Could someone please guide a better alternative solution?

Original Q&A

There are 3 best solutions below

**Thowzif Abdullah** · Answer 1 · 2021-12-12T10:33:20.447000

This one line below did the job.

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

Full code for Onclick ADD button:

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);
    });

**Fabio Scagliola** · Answer 2 · 2021-12-12T11:09:23.390000

Here is a working example that does not use 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/[email protected]/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>

**Cybex Developers** · Answer 3 · 2021-12-12T12:12:57.087000

It is very easy see :

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

jQuery - Copy text and add it in the place where the cursor currently is

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CURSOR-POSITION

Trending Questions

Popular # Hahtags

Popular Questions