[Question]: How to get href from rte?

[SeongwoonHong]

I have this rte toolbar where you can type and click 'save' and it's going to create a link for the selected text. but the problem is that the value of the input field should be dynamic based on selected text. If the selected text has href and the input field should show the href in there. How do i get href for the selected text in rte result or update function? This is a piece of my code

this.editor.RichTextEditor.add('custom-link', {
          icon: '<div><input name="link" id="custom-link-input" value="" /><button type="submit">save</button></div>',
          attributes: {title: 'Link', class: 'gjs-rte-action custom-link'},
          event: 'change',
          result: (rte) => {
            rte.insertHTML(`<a href="${this.currentLinkValue}">${rte.selection()}</a>`);
          },
          update: (rte, action) => {
            console.log('2')
            console.log('rte.selection().toString() = ', rte.selection().toString());
            console.log('this.editor.getSelected() = ', this.editor.getSelected())
             // here i'd like to get the href of the selected text if it has one.
          }
        });

document.getElementById('custom-link-input').addEventListener('input', (e) => {
          this.currentLinkValue = e.target.value;
        });

thank you Artur

[artf]

rte.selection() returns the Selection object which you can use to detect the pointed node (from which you can get all the attributes you need)

[SeongwoonHong]

@artf Could you give me an example of doing it please? I've tried lots of stuff but couldn't find a way to get any attributes using rte.selection().... I really appreciated it Artur.

[artf]

It's all described here https://developer.mozilla.org/en-US/docs/Web/API/Selection You can start by looking at Selection.focusNode...

[SeongwoonHong]

@artf Thank you for your quick response .. i know that the Selection document says that rte.selection().focusNode returns node but rte.selection().focusNode returns string here.. do you happen to know why and how to solve this? I even tried rte.selection().focusNode() but it says focusNode is not a function... Thank you so much..

[artf]

focusNode returns string here this is how the Node works, so to get the element just do rte.selection().focusNode.parentElement

[SeongwoonHong]

@artf WOW you save my life!Thank you! I have no idea how many hours to figure this out by myself... thank you thank you! it's working now.....!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.