Angular Editor Link

[kvinay18]

Can we open custom Popup when we click on Link?

[ShemiNechmad]

Hey, I was looking for a solution myself, I did some digging in the package and found an answer that would work.

1. First you make a custom button for a link, put it in an absolute position somewhere, something like: <button (click)="link()" style="position: absolute; top: 5px; right: 5px; width: 20px; height: 20px;" >[link icon]
2. Create your own pop up window which is triggered when button is clicked.
3. Add this to the angular-editor tag in the html file: <angular editor (mouseout)="onTextAreaMouseOut($event)".....
4. Add the next code to your component ts file:

  onTextAreaMouseOut = (): void => {
    if (document.getSelection) {
      const sel = document.getSelection();
      if (sel.getRangeAt && sel.rangeCount) {
        this.savedSelection = sel.getRangeAt(0);
        this.selectedText = sel.toString();
      }
    } else if (document.getSelection && document.createRange) {
      this.savedSelection = document.createRange();
    } else {
      this.savedSelection = null;
    }
  }

  createLink(url: string) {
    if (!url.includes('http')) {
      document.execCommand('createlink', false, url);
    } else {
      const newUrl = '<a href="' + url + '" target="_blank">' + this.selectedText + '</a>';
      this.editor.editorService.insertHtml(newUrl);
    }
  }

These are 2 functions. The first is to save a selection you made for the link (before clicking somewhere else on the page). The second function should be fired after the pop up is closed and it makes the selected text to be a link. Should do the job definitely and no need to look for a huge ckeditor package which also cost money for plugins :) Good luck.