Frontend engineer to add autocomplete function without a trigger to WYSIWYG editor(Froala)
$15-25 USD / hour
We are trying to add autocomplete to WYSIWYG text editor[froala] at local-side using javascript/jquery/vue.js.
(The froala is changeable to the other WYSIWYG text editor like CKEditor. However, we prefer to use the froala.)
The froala already provides 3rd party Integration [login to view URL] for autocomplete.
However, [login to view URL] uses "@" or a predetermined character to trigger autocomplete.
(Similarly, the CKEditor has its own autocomplete plugin using a trigger "[[".)
We want not to type any trigger to use autocomplete. It means that every character(except ' ') typed by the user triggers autocomplete.
(We think that this function is similar to Intellisense of Visual Studio)
AUTOCOMPLETE: When a datasource includes "Jacob", "Isabella", "Ethan", "Emma", "Michael" and "Olivia", if I type "b"(without trigger) at a certain position in the froala editor, a popup list having "Jacob" and "Isabella" should be shown up at the position "b" typed(the position and a direction of the popup list should be differed by the position of the character.) If I type "c"(without trigger), the list having "Jacob" and "Michael" should be shown up.
AUTOSTYLE: And then, if I choose "Isabella", it should be inserted into the froala area with "span" tag, for example, "<span class='test'>Isabella</span>";
AUTODELETE: The autocompleted text should be deleted by one key-down event(backspace or delete).
NOT EDITABLE: The autocompleted text should be not editable. It has to be handled as one body after it is inserted into the editor.
AUTOCHANGE: Also, if the "Isabella" of the datasource is modified or changed to "XXXXXXX" by the user after the "Isabella" inserted into the froala editor, the text(actually <span ~~>Isabella</span>) should be changed to "BOOTSTRAP"(actually <span ~~>XXXXXXX</span>).
SPACEBAR AVAILABLE: ' ' among the searching characters should be handled as a part of the searching query. It means that ' ' does not close the popup list to autocomplete.
If the datasource includes "test spacebar" and I type "test " in the froala editor, the list including "test spacebar" should be maintained shown.
MULTILINGUAL AVAILABLE: English, Korean, Japanese. If you want, we can provide test lists of Korean and Japanese.
BROWSER COMPATIBILITY: IE10+, Chrome and modern browsers.
Our goal is very similar to that of [login to view URL] except using the trigger "@". Therefore, you may use or customize [login to view URL] if possible.
You should provide me with complete html/css/javascript pages having a test UI for the above functions.
Project ID: #19265581
About the project
16 freelancers are bidding on average $20/hour for this job
Hi there, I have read everything carefully & understood the scope of this project, as you have nicely explained whole functionality. However, it would be really good, if you can initiate the chat & talk before final More
Dear Employer, Greetings from "One of the Top Preferred Freelance Firms"! For your project scope, I would be really glad to let you know that you can hire from our team,skilled developers and professionals who w More
Hi, Please interview to me, we can discuss more about your job then I can start this job for you asap ! Would happily work with you, thank you!
Hi There, I am Expert Front-End Designer/Developer with 6+ years quality experience in design & development of website graphics, email templates, mobile app UI, wire-framing, and banners/flyers/info-graphic creatio More
I am specialize in jQuery/Javascript development and are excited for the opportunity to work with you in accomplishing your goals. We have developed thousands of websites in many programming languages for clients all o More
Dear Prospect Hiring Manager. Thank you for giving me a chance to bid on your project. i am a serious bidder here and i have already worked on a similar project before and can deliver as u have mentioned "I can do More