Issue #1358Opened August 13, 2018by alimajed930 reactions

Create link only on "OK" button press

Question

Hello everyone,

I overwrote the default 'Link' acton of the rich text editor:
<img width="1274" alt="screen shot 2018-08-13 at 1 58 43 pm" src="https://user-images.githubusercontent.com/28840780/44027999-2788cfaa-9f01-11e8-9f5e-e24d3ced19ed.png">

Now when clicked, a modal opens, where the user can add the desired url, the text display and the target and submits. Something similar to the implementation currently now available on "demo newsletter editor" using the "grapesjs-plugin-ckeditor" I think. <img width="1275" alt="screen shot 2018-08-13 at 1 56 45 pm" src="https://user-images.githubusercontent.com/28840780/44028062-57f71a34-9f01-11e8-980a-2e846b70dce0.png">

I tried the same implementation suggested in the following issue: Issue-610 Try it here

The problem of this implementation is that the link is created even before the modal opens, which is not optimal for the user experience; If the user closes the modal and even without submitting, the link will be created anyway.

My questions are: 1 - How can I check the implementation of the "Link" action of the richTextEditor in "demo newsletter editor" so I can replicate it? Since there and if the modal is closed without submitting, the link is no created. I dowloaded the source code of "grapesjs-preset-newsletter": Source Code
but I can only see the following implementation of the action
link: { icon: <span style="transform:rotate(45deg)"></span>, name: 'link', attributes: { style: 'font-size:1.4rem;padding:0 4px 2px;', title: 'Link' }, result: rte => rte.insertHTML(<a class="link" href="">${rte.selection()}</a>) } which does not lead to opening the modal I am talking about. I also downloaded the source code of ckeditor: Source code and I still coulnd't find the implementation.

2-Why richTextEditor.exec('createLink', '__new__'); or rte.insertHTML(<a class="link" href="">${rte.selection()}</a>) dont lead to creating the link if placed on button click event? so If those 2 commands are executed only on button clicked (ok of the modal), the link is not created.

Thank you

Answers (3)

artfAugust 13, 20180 reactions

1 - How can I check the implementation of the "Link" action of the richTextEditor in "demo newsletter editor" so I can replicate it? Since there and if the modal is closed without submitting, the link is no created.

That modal is from CKEditor

2-Why richTextEditor.exec('createLink', 'new'); or rte.insertHTML(<a class="link" href="">${rte.selection()}</a>) dont lead to creating the link if placed on button click event? so If those 2 commands are executed only on button clicked (ok of the modal), the link is not created.

Probably because you unfocus from the component, indeed your problem link is created even before the modal opens is actually because you're executing the link creation before the link is even confirmed. So, keep the focus and you'll be able to execute it later

alimajed93August 13, 20180 reactions

Okay thank you for your quick response @artf How to keep the focus on the rte?

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.