Issue #1706💬 AnsweredOpened January 3, 2019by SeongwoonHong1 reactions

How to get href from rte?

快速解答by SeongwoonHong1

@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.....!

Read full answer below ↓

Question

capture

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

Answers (3)

SeongwoonHongJanuary 5, 2019

@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.....!

artfJanuary 5, 2019

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)

SeongwoonHongJanuary 5, 2019

@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.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.