CKEditor 5 custom plugin

This is a small and simple project. Use a basic template of CKEditor 5 using BalloonBlockEditor. We need the exactly same functionality as shown in the video clip and you must write a plugin for that.

Feature 1:
Whenever someone types [[, the plugin should be activated by CKEditor (because of your plugin code), and it will show a list of autosuggestion and closing ]].

Feature 2:
User can select one of the autosuggestions by using up/down and enter, or just enter to go the end of closing ]]. Once the cursoe goes beyond the closing ]], it must render it as a link with custom css class. The CSS of [[, ]] and the links must match the video clip.

Feature 3:
In the same plugin, write a toolbar button. When user selects a portion of text and clicks that button, it must create a link described in Feature 2 with opening [[ and closing ]] and the same CSS, but this time no need to show autosuggestion rather create a link to google.

No inline-CSS, all stylings must be done via CSS classes, also must be in vanilla JavaScript, no libraries. Must work consistently on Edge, Chrome, Firefox in all resolutions.

Go to the website shown in the video clip if needed.

Show title fields as autosuggestion from this URL: (removed by Toogit admin)
About the recuiter
Member since Mar 14, 2020
Muhammad Yusuf
from Saskatchewan, Canada

---

---

Looking for help? Checkout our video tutorial
How to search and apply for jobs

How to apply? Do you have more questions about the Job?
See frequently asked questions