Search code examples
javascriptvaadinvaadin7

Is there a ui-component for vaadin that I can use for text highlighting?

I am new to Javascript and Vaadin. I am looking for a text component that allows highlighting and annotation. This is what I have in mind.

I want to display a couple of paragraphs on my web-page and then the user should be able to select certain sections of text and add a highlight. When the user clicks on the highlighted section, I want to show a context-menu with some operations.

Is there a vaadin component or some other javascript component I can use or modify to achieve what I am looking for?

If there do not exist any components, can you suggest the steps that I need to do to create such a component.

Solution

  • Some options:

    Rich text area: https://vaadin.com/book/-/page/components.richtextarea.html

    Context menu: https://vaadin.com/directory#!addon/69

    I made a quick demo project with a rich text area & a context text area.

    In the bottom text area I have right clicked & you can see a context menu appears with "Insert" & "Clean". This is customisable & just needs some css styles.

    enter image description here

    You could use a rich text area to edit your text, similar to wikipedia? Maybe by having an edit tab or an edit option in your context menu?

    enter image description here

    Or you could edit the text in a pop up panel, activated on a double click? Might look cool!

    See http://demo.vaadin.com/sampler/#ui/structure/popup-view (You can put any layout with components on this)

    Or you could put your text in a read only text area & could even use the context menu to change the background color of your highlighted text?

    I'll keep looking...