Adding a Button to Change Text Color in ui.editor Toolbar

[Daniel-Fei]

Question

Hello everyone,

I previously managed to add a save button to the toolbar in ui.editor with the help of the community (refer to the discussion here). Thanks to your guidance, the functionality works as expected.

Now, I would like to take it a step further by adding a button to the toolbar that allows users to change the color of the selected text. Could anyone guide me on how to achieve this? Any advice or examples would be greatly appreciated!

Thanks in advance!

[falkoschindler]

You can run editor commands with the runCmd method:

editor = ui.editor()
editor._props['toolbar'] = [
    ['left', 'center', 'right', 'justify'],
    ['bold', 'italic', 'underline', 'strike'],
    ['undo', 'redo'],
    ['red'],
]
with editor.add_slot('red'):
    ui.button(icon='format_color_text',
              on_click=lambda: editor.run_method('runCmd', 'foreColor', 'red')) \
        .props('flat dense size=sm').classes('text-red')

But I'm not sure if all browsers support such commands. Quasar just points to https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand, where it is marked as deprecated. Does anyone have more information about this API?

[python-and-fiction]

@falkoschindler Thank your method, I get the final solution.
Here is:

with ui.editor().props(''':toolbar="[['left','center','right','justify'],['bold','italic','underline','strike'], ['undo','redo'],['color','save']]"''').classes('w-[480px]') as editor: 
    with editor.add_slot("save"):
        with ui.button(icon="save",on_click=lambda:ui.notify(f'{len(editor.value)} chars saved!')).props("flat dense size=0.8em").classes("text-black p-0"):
            ui.tooltip('Save text').props('delay=1200 transition-duration=300')
    with editor.add_slot("color"):
        with ui.icon('colorize',size='1.2em').classes("text-black p-0"):
            ui.tooltip('Change color').props('delay=1200 transition-duration=300')
            picker = ui.color_picker(on_pick=lambda e:  editor.run_method('runCmd', 'foreColor', f'{e.color}') ).props('no-focus no-refocus auto-close')
            picker.q_color.props('no-header no-footer default-view=palette')

[Daniel-Fei]

Hi @falkoschindler @python-and-fiction,
Thank you so much for your help with the toolbar customization. Your guidance was exactly what I needed!
Thank you!

[Daniel-Fei]

Hi @python-and-fiction @falkoschindler,
Thank you again for your help! I just noticed a very minor issue—the color button doesn't seem to have a hover effect. I'm wondering if there’s a way to add that hover effect? Thank you!

[python-and-fiction]

Could provide a result gif?
Do you want hover effect on any button by css?
Check this:
https://tailwindcss.com/docs/hover-focus-and-other-states
And this:
#2943

ui.button('HOVER').classes('hover:!bg-red-400')

[Daniel-Fei]

Hi @python-and-fiction

Thank you for your guidance. With your help, I've almost achieved the desired effect. Here's the code:

save_btn_light = 'text-white'
save_btn_dark = 'text-black'
bg_light = 'bg-[#e8e8e8]'
bg_dark = 'bg-[#3d3d3d]'

with editor.add_slot("color"):
    with ui.icon('colorize', size='1.2em').classes(f"{save_btn_light} hover:!{bg_light} cursor-pointer").style('padding: 2.8px; border-radius: 3px; margin-left: 4px;'):
        ui.tooltip('Change color').props('delay=1200 transition-duration=300')
        picker = ui.color_picker(on_pick=lambda e: editor.run_method('runCmd', 'foreColor', f'{e.color}')).props('no-focus no-refocus auto-close')
        picker.q_color.props('no-header no-footer default-view=palette')

Now, the color picker icon behaves similarly to other buttons in the toolbar when hovered over with the mouse.
Thanks again for your help! Best regards!