[Question] Custom link modal doesn't update the current text but add another text with link
Question
Hello Artur,
I'm trying to have a custom modal when clicked link button in RTE. but it doesn't convert selected text to link but what it does is it adds another text with link.
this.editor.RichTextEditor.add('custom-link', {
icon: '<img src="assets/images/link.png" />',
attributes: {title: 'Link', class: 'gjs-rte-action'},
result: rte => {
// define what's going inside modal
const customLinkContainer = document.createElement('div');
const btnLink = document.createElement('button');
const linkInputEl = document.createElement('input');
linkInputEl.setAttribute('id', 'custom-link-input');
linkInputEl.value = `<a class="link" href="asdf">${rte.selection()}</a>`
btnLink.innerHTML = 'aa';
btnLink.onclick = () => {
const inputEl = document.getElementById('custom-link-input');
const selectedEl = this.rte.selection();
rte.insertHTML(`<a class="link" href="${inputEl.value}">${rte.selection()}</a>`);
modal.close();
};
customLinkContainer.appendChild(linkInputEl);
customLinkContainer.appendChild(btnLink);
// configure modal
modal.setTitle(t('Link'));
modal.setContent(customLinkContainer);
modal.open();
}
});
Thank you..
Answers (3)
I'd like to add one more, inside onclick handler for btnLink, <a class="link" href="${inputEl.value}">${rte.selection()}</a> returns <a class="link" href="..."></a> the inner text is empty.. i have no idea how to approach this
- Change this:
rte.insertHTML('<a class="link" href="${inputEl.value}">${rte.selection()}</a>');torte.insertHTML(linkInputEl.value); rte.selection()will be empty because the focus is lost, learn how to store the selection (eg. https://stackoverflow.com/questions/9841082/execcommand-inserthtml-breaks-stored-window-getselection), that part is up to you.
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.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1650
[Question] How to remove a link from text(remove a link)
using built-in RTE and trying to add a rte custom button that when clicking, it removes current link. Could you provide me with the code pl...
Issue #1580
[Question] Add Custom Button to RTE
Hello all, i'm currently trying to move away from ckeditor (used in an legacy app to create emails and microsites). This works very well ac...
Issue #1327
[QUESTIONS] Replacing selected text and getting html
Hi! Im trying to replace selected text with a code (random code). It's works, i can see the code, but when i do editor.getHtml() not. If i...
Issue #1714
auto select componet in RTE
When I add a link from RTE, it is not selected as the link component, I have to deselect the parent component that is the TEXT and select a...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.