Frontend engineer to add autocomplete function without a trigger to WYSIWYG editor(Froala)

In Progress Posted 4 years ago Paid on delivery
In Progress

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.

CSS HTML5 JavaScript jQuery / Prototype Vue.js

Project ID: #19265581

About the project

16 proposals Remote project Active 4 years ago

16 freelancers are bidding on average $20/hour for this job

leadconcept

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

$22 USD / hour
(21 Reviews)
7.9
augurstech

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

$15 USD / hour
(50 Reviews)
7.6
bearsthemes

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!

$27 USD / hour
(40 Reviews)
6.3
symaticssolution

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

$15 USD / hour
(33 Reviews)
6.1
amit0423

Hi I have read your project description very carefully and I have also visited through the link javascript/jquery/vue.js you've provided. I can do your project well as I have worked on the similar technologies you'v More

$22 USD / hour
(15 Reviews)
4.8
rp07364

I've 7+ years of experience in Web Development/Web design, Mobile App Development(IOS/Android), Graphic design, Logo Design Business Cards & Stationery, Flyers & Brochures, Packaging Design, Web & Mobile Design, Socia More

$22 USD / hour
(10 Reviews)
4.0
SiliconSecret

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

$30 USD / hour
(2 Reviews)
3.0
Mexi2705

Hello I have walked through your note and enough confidence that I can work on your project I am having 10 years of rich experience as Mobile & Web Developer and also know graphics designing means in my career i learn More

$16 USD / hour
(4 Reviews)
2.1
amit8931

Hello, I have reviewed the requirement about the work based on the requirement I am ready to work for you as according to your needs . Awaiting for your positive response so I will start the work ! Thanks More

$22 USD / hour
(1 Review)
1.2
techlinesols6

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

$22 USD / hour
(0 Reviews)
0.0
vtgroup

Hi Sir, I am a web developer ready have 12 years experiences working. I good with development base app, and to do as way for web-software. I am hard working all part with PHP, JS, CSS and always do easy flow. I unders More

$15 USD / hour
(0 Reviews)
0.0