Get pointer position in textarea

[iam-sanjay]

Hello Team, I want to know pointer position in textarea and requirement is like to insert predefined text in that position. Please help to me!

Thanks, San

[kolkov]

Hi! What do you mean by pointer position?

[iam-sanjay]

Hi Kolkov, Thanks for reply.

Example: hello world!

Cursor has on 'w' and I want to know the position and will add new text 'my ' on that position.

Output: hello my world!

Thanks, San

[kolkov]

Those. Do you want to programmatically insert arbitrary text into the position of the cursor?

[yashm19]

You can insert the node at the position using a click event on the editor..! Call this function on click insertNode() { let selection = window.getSelection().getRangeAt(0); let parentNode = document.createElement("a"); //create a custom node to insert selection.insertNode(parentNode); parentNode.insertAdjacentHTML("beforebegin", " "); parentNode.insertAdjacentHTML("afterend", " "); //add space after and before node to bring cursor outof the node }

[thinkdj]

Those. Do you want to programmatically insert arbitrary text into the position of the cursor?

Yes. How can I do that?

[ankit1329]

This is something which I need too.

[ankit1329]

How can we insert text at cursor position (which can be somewhere in between the entered html) programmatically.

[newmesiss]

Has anyone succeeded?

[yashm19]

Yah

On Mon, 16 Dec, 2019, 7:06 pm Luis Ruiz, [email protected] wrote:

Has anyone succeeded?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/kolkov/angular-editor/issues/104?email_source=notifications&email_token=ALSERFFMWFDGI7E6CUHAHR3QY576PA5CNFSM4HW5AYG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG6XHYQ#issuecomment-566064098, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALSERFBTN5PEBAMMKA2OWSLQY576PANCNFSM4HW5AYGQ .

[kolkov]

I don't understand how you want to insert some text at the position. We have node tree, not plain text in editor.

[thinkdj]

@kolkov I will tell what I ran into: We wanted to insert variables like %firstname%, %account% etc into wherever the cursor was at in the text editor.

[kolkov]

@thinkdj what should be used as a trigger for insertion in your case?

[ilacomp]

I had the same task. I need to insert some text in current cursor position when user clicks on the list of values in my component. I tried to do like this:

this.editor.focus();
this.editorService.restoreSelection();
this.editorService.insertHtml('text to insert here');

But it inserts always at the beginnig of text. Any suggestions?

[Svitra]

I think it would be very useful to add w possibility of inserting a string at last cursor position (or at the end of the string is the area was not yet touched). I tried to fullfill my use case (which is very similar to described above) using patchValue (I am using editor as form control) but unfortunately then the undo/redo possibility stops working.

[yashm19]

Hello there,

I just signed the petition "San Jose State University : Refund SJSU Student’s Tuition" and wanted to see if you could help by adding your name.

Our goal is to reach 5,000 signatures and we need more support. You can read more and sign the petition here:

http://chng.it/b4rJ8Tyx6x

Thanks! Yash

[Emilio-K]

@thinkdj what should be used as a trigger for insertion in your case?

In my case, I am going to have a list of buttons and each will insert different text at the position of the cursor, is this possible using your HTML editor? If it isn't possible with cursor, is there another way to do it? Appreciate the great tool you made.

For now I am just appending to the end, which should work fine for most cases, but in the case where someone wants to insert text before the end is where that issue would arise.

[sagar-agola]

I had the same task. I need to insert some text in current cursor position when user clicks on the list of values in my component. I tried to do like this:

this.editor.focus();
this.editorService.restoreSelection();
this.editorService.insertHtml('text to insert here');

But it inserts always at the beginnig of text. Any suggestions?

1. make template variable of any type

@ViewChild('editor') editor: any;

2. your method will be updated as follows

insertHTML(data: string): void {
    this.editor.focus();
    this.editor.editorService.restoreSelection();
    this.editor.editorService.insertHtml(data);
}

[LuigiRibeiro]

<angular-editor #editor [(ngModel)]="htmlContent" [config]="config">

<button (click)="editor.editorService.insertHtml('enter-your-text-here')">ADD TEXT

[lilke1992]

<angular-editor (keyup)="txtEditorPosition(txtEditor)" (click)="txtEditorPosition(txtEditor)"> txtEditorPosition(position) { console.log(position?.editorService?.savedSelection?.startOffset); }

That is starting position returned as number. There is also endOffset also returned as number. There is also selectedText if user selected some part of text. Cheers :)

[SeyedZia]

You are very good Thanks., you have saved my time

[ShemiNechmad]

I found only one way to implement text dynamically to kolkov/angular-editor package.

in the html file: <angular-editor #editor [(ngModel)]="htmlContent" [config]="config" (ngModelChange)="onContentChange($event)"></angular-editor>

in the ts file:

addTextDynamically() {
    let cursor = this.editor.editorService.savedSelection.startOffset;
    this.editor.editorService.savedSelection.startContainer.data =
        this.editor.editorService.savedSelection.startContainer.data.slice(0, cursor)
        + ["implemented string"] + this.editor.editorService.savedSelection.startContainer.data.slice(cursor);
    setTimeout(() => {
        this.editor.editorService.insertHtml(" ");
    }, 0);
}

*the insertHtml in the end is for the change to take effect also in the htmlContent property.

[zijianhuang]

I think the feature asked had been implemented, though not as abstract as some would expect. Here's the codes that should work:

			navigator.clipboard.readText().then(
				s => {
						this.htmlEditorService.insertHtml(s);
	
				}
			);

s from readText is already plain text with line breaks transformed from HTML. To get HTML, you may need to use clipboard.read().

In your component or module, you need:

	providers: [
		AngularEditorService
	]

The AngularEditorComponent is also using this service though you cannot directly reference it because it is a private memeber. However, because AngularEditorService is a singleton service at least in some contexts, so calling this.htmlEditorService.insertHtml(s) will insert context to the cursor/selection of the editor. I guess the presumption was that you have only one editor at a time, otherwise, with 2 editors, the service may behave strangely though I had never tested such scenario.

I think this issue may be closed.

[Kenji94]

@zijianhuang Thanks a lot! It's now working :) Here is what I did for those who want:

` onPaste(event: ClipboardEvent) {

      this.consoleLoggerService.log('onPaste');
      event.stopPropagation();
      event.stopImmediatePropagation();
      event.preventDefault();
      const htmlMode = this.myEditor.editorToolbar.htmlMode;
      if (htmlMode) {
          this.consoleLoggerService.log('do not modify text pasted when in htmlMode');
          return;
      }
      let pastedText = event.clipboardData.getData('text/html');
      pastedText = this.modifyTextPasted(pastedText);
      this.angularEditorService.insertHtml(pastedText);

}

`

[ganholete]

@zijianhuang Thanks a lot! It's now working :) Here is what I did for those who want:

` onPaste(event: ClipboardEvent) {

      this.consoleLoggerService.log('onPaste');
      event.stopPropagation();
      event.stopImmediatePropagation();
      event.preventDefault();
      const htmlMode = this.myEditor.editorToolbar.htmlMode;
      if (htmlMode) {
          this.consoleLoggerService.log('do not modify text pasted when in htmlMode');
          return;
      }
      let pastedText = event.clipboardData.getData('text/html');
      pastedText = this.modifyTextPasted(pastedText);
      this.angularEditorService.insertHtml(pastedText);

}

`

But does this solution add the content at the cursor position? I tried all the solutions here but none worked. I have the same need as the thread creator: insert %keywords% at the cursor position

[Kenji94]

But does this solution add the content at the cursor position? I tried all the solutions here but none worked. I have the same need as the thread creator: insert %keywords% at the cursor position

Yes it does, you can find it working on https://neopload.neovel.io/ Create an book and add a chapter, you will find the text editor on the chapter page.

[ganholete]

If I could understand, I didn't find in your editor the desire that the author describes: adding keywords to the cursor after clicking on an item. This would be the scenario:

[ganholete]

I found the problem. I need to add a href="#" in the link, otherwise the editor shows me the error "ERROR Error: Unable to perform the operation". Here is the code working as I need it. If I remove href="#" from the link it stops working: https://stackblitz.com/edit/angular-ivy-kgudlp Is this a bug?

[JorgeMdn]

I had problem when trying to add HTML string in editor. But i found the form to add asynchronous data with the custom buttons.

First button for add asynchronous html with my logic business and use the custom buttons you can add that item.

Second button to paste htmlString

Third button to delete reference

You need to add a property in your component.ts for save that htmlString

<ng-template #customButtons let-executeCommandFn="executeCommandFn"> <ae-toolbar-set> <ae-button iconClass="fa-solid fa-book" title="Agregar referencia a una evidencia" (buttonClick)="addEvidenceLink()" > </ae-button> <ae-button iconClass="fa-solid fa-clipboard" title="Pegar referencia" (buttonClick)=" executeCommandFn('insertHtml', linkToAdd ?? '') " > </ae-button> <ae-button iconClass="fa-solid fa-trash-o" title="Borrar referencia" (buttonClick)="deleteLink()" > </ae-button> </ae-toolbar-set> <ae-toolbar-set> <ae-button iconClass="fa-solid fa-table-cells" title="Agregar tabla" (buttonClick)="openAddTable()" > </ae-button> <ae-button iconClass="fa-solid fa-clipboard" title="Pegar tabla" (buttonClick)=" executeCommandFn('insertHtml', tableToAdd ?? '') " > </ae-button> <ae-button iconClass="fa-solid fa-trash-o" title="Borrar tabla" (buttonClick)="deleteTable()" > </ae-button> </ae-toolbar-set> </ng-template>