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)
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
Okay thank you for your quick response @artf How to keep the focus on the rte?
You need to catch events which trigger a blur and call stopPropagation. This is how is kept by clicking on the toolbar itself https://github.com/artf/grapesjs/blob/dev/src/rich_text_editor/index.js#L82
Related Questions and Answers
Continue research with similar issue discussions.
Issue #609
CSS editing duplicates body properties
It's still duplicating body sections and properties: When I pull it up, this is what it looks like: <img width="472" alt="screen shot 2017-...
Issue #678
Help Wanted
Hello, 2 queries : 1) How to Add a LOGO as in Demo webpage. 2) How to move the block manager, Style Manager from Right Side to Left Side. T...
Issue #1000
[Question/Bug] how to show plain text as trait
I want to show plain text within the trait under the setting button. In the above image 'Configuration_Type' I want to show as plain text....
Issue #2838
Style sections are duplicated
Hello Guys I'm using: "grapesjs": "0.16.12", "grapesjs-preset-webpage": "0.1.11", and in the css edit area i get this strange behavior: <im...
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.