CODEWITHSUNDEEP
javascriptvue.jsquasar-framework
Pathong
Pathong

Reputation: 73

Replace words with chips or change their style within a textarea in VueJS (Quasar)

I'm trying to implement a textarea component that will accept text input. I wish to be able to replace some predefined keywords with chips to highlight them.

I am using Quasar Framework's q-input component and I can't find any way to control the style of the content. I'm willing to accept a solution that will include coloring the keywords and not replacing them with chips, but I can't achieve this behavior either.

Upvotes: 2

Views: 1070

Answers (1)

geoffrey
geoffrey

Reputation: 2454

textarea elements only deal with plain text.

Quasar has a WYSIWYG editor which allows to paste tokens. Try and see if you can bend it to suite your needs. While playing with it I found that the behaviour was quirky and I'm not sure the Vue component will give you the control you need.

You would need the dreaded contenteditable, execCommand and queryCommandState if you wanted to implement this yourself, which I can't encourage you to do as it's a painful experience.

Personally, I would fallback to a list of chips that would appear above or bellow the textarea as the user types.

if you use a monospace font*, you can compute the position and the length of the words you match in order to fill some colourful shapes in a canvas positioned underneath. You can't be too fancy with this but it's cheap to implement.

Note that dealing with a textarea is not as bad as dealing with contenteditable so you could be able to replace the words you match with spaces in order to see a canvas-generated chip through the hole but you will have to keep track of the state of the textarea content.

*Although it is not required to use a monospace font, using any other font will require to actually measure the length of the text and the length of the spaces you replace your matches with, and it will start to get a tad complex.

Upvotes: 1

Related Questions