CODEWITHSUNDEEP
javascriptcssangulartypescript
Swapnali Botre
Swapnali Botre

Reputation: 111

How I can Insert text at cursor position using angular-editor

I want to add selected value from dropdown to be displayed in text box at position cursor is present. I'm using .

enter code selectChangeHandler(event: any) {
this.selectedID = event.target.value;
// console.log("this.selectedID", this.selectedID);
this.arrayfordynamic += `<div>{{DV.Product.${this.selectedID}}}</div>`
console.log("this.arrayfordynamic", this.arrayfordynamic)
this.productDiscriptionArrayForID = `<div>${this.arrayfordynamic} </div> ${this.product.productDescription}`
// console.log("this.selectedIDwithDiscription-----", this.arrayfordynamic);
this.productForm.controls.des.setValue(this.productDiscriptionArrayForID);
}

I'm setting dropdown value into the angular-editor text. But I wan't to set this value at cursor position when I click on dropdown value. Please let me know how we can do that.

Upvotes: 2

Views: 4361

Answers (2)

Felipe Sotomayor
Felipe Sotomayor

Reputation: 11

Add "as HTMLInputElement" to it and everything works perfect.

 getCursor() {
    let cursor = document.getElementById('texto-value') as HTMLInputElement;
    let start = cursor.selectionStart;
    let end = cursor.selectionEnd;
    return [start, end];
  }

Upvotes: 1

Mahdi Zarei
Mahdi Zarei

Reputation: 7396

Let's say this is your input:

<input id="myInput"type="text">

You can get position by this function:

function getCursor() {
  let cursor = document.getElementById('myInput');
  let start = cursor.selectionStart;
  let end = cursor.selectionEnd;
  return [start, end];
}

Now you have to write a function to patch value:

function patchValue(selectedValue) {
  let currentValue = document.getElementById('myInput').value;
  let cursor = getCursor();
  let patchedValue = currentValue.substr(0, cursor[0]) + selectedValue + currentValue.substr(cursor[1]);
  document.getElementById('myInput').value = patchedValue;
}

You can even select a range and replace that range with your selected value with this code.

Here's an example:

function getCursor() {
  let cursor = document.getElementById('myInput');
  let start = cursor.selectionStart;
  let end = cursor.selectionEnd;
  return [start, end];
}

function patchValue() {
  let currentValue = document.getElementById('myInput').value;
  let cursor = getCursor();
  let patchedValue = currentValue.substr(0, cursor[0]) + document.getElementById('myPatch').value+ currentValue.substr(cursor[1]);
  document.getElementById('myInput').value = patchedValue;
}
<label>patch:</label><input id="myPatch"type="text">
<br>
<label>input:</label><input id="myInput"type="text">
<br>
<button onclick="patchValue()">patch</button>

Upvotes: 2

Related Questions