Rich, updatable text editor without toolbar

[tjongsma]

Question

Hi everyone,

I'm working on a transcription application where I'd like to insert some (transcribed) text into a text area, and then have the user be able to edit this. I also want some of the text I insert to be in italics.

I've looked at multiple ways to achieve this.

The first is a simple ui.html element, this allows for the text to be rich of course, but doesn't allow for editing.

Next is ui.textarea, which allows for editable text but no italics. I've tried editing it with some html elements like e.g. here: https://www.reddit.com/r/nicegui/comments/1clj3b8/underscore_single_letter_in_a_control_label/, but no luck.

Finally, ui.editor comes pretty close but I don't want the toolbar to be there. I basically want the user to only be able to add raw text and the only italics texts comes from inserts.

Any suggestions? Thanks in advance!

[falkoschindler]

Hi @tjongsma,

You could hide the toolbar of ui.editor with some custom CSS:

ui.add_css('.q-editor__toolbar { display: none }')

ui.editor(value='This is a <i>test</i>.')

[tjongsma]

Amazing, thank you for the quick reply Falko!