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

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?

CodePudding user response：

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

CodePudding user response：

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>
        onl oad = () => {
            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 >
        <div >
            <label for="source" >Source</label>
            <input  id="source" value="TEST" />
        </div>
        <div >
            <label for="target" >Target</label>
            <textarea  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"  id="button">Insert</button>
    </div>
</body>
</html>

CodePudding user response：

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>