Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Forms

/

Editor

An HTML editor component based on Suneditor .

Editor content

import reflex as rx


class EditorState(rx.State):
    content: str = "<p>Editor content</p>"

    def handle_change(self, content: str):
        """Handle the editor value change."""
        self.content = content


def editor_example():
    return rx.vstack(
        rx.editor(
            set_contents=EditorState.content,
            on_change=EditorState.handle_change,
        ),
        rx.box(
            rx.html(EditorState.content),
            border="1px dashed #ccc",
            border_radius="4px",
            width="100%",
        ),
    )

The extended options and toolbar buttons can be customized by passing an instance of rx.EditorOptions for the set_options prop.

FieldDescription
default_tag Specifies default tag name of the editor. default: 'p' {String}
mode The mode of the editor ('classic', 'inline', 'balloon', 'balloon-always'). default: 'classic' {String}
rtl If true, the editor is set to RTL(Right To Left) mode. default: false {Boolean}
button_list List of buttons to use in the toolbar.

The button_list prop expects a list of lists, where each sublist contains the names of buttons forming a group on the toolbar. The character "/" can be used in place of a sublist to denote a line break in the toolbar.

Some valid button_list options are enumerated in rx.EditorButtonList, seen below.

class EditorButtonList(list, enum.Enum):
    BASIC = [
        ["font", "fontSize"],
        ["fontColor"],
        ["horizontalRule"],
        ["link", "image"],
    ]
    FORMATTING = [
        ["undo", "redo"],
        [
            "bold",
            "underline",
            "italic",
            "strike",
            "subscript",
            "superscript",
        ],
        ["removeFormat"],
        ["outdent", "indent"],
        ["fullScreen", "showBlocks", "codeView"],
        ["preview", "print"],
    ]
    COMPLEX = [
        ["undo", "redo"],
        ["font", "fontSize", "formatBlock"],
        [
            "bold",
            "underline",
            "italic",
            "strike",
            "subscript",
            "superscript",
        ],
        ["removeFormat"],
        "/",
        ["fontColor", "hiliteColor"],
        ["outdent", "indent"],
        ["align", "horizontalRule", "list", "table"],
        ["link", "image", "video"],
        ["fullScreen", "showBlocks", "codeView"],
        ["preview", "print"],
        ["save", "template"],
    ]

A custom list of toolbar buttons may also be specified using these names as seen in the following example.

Since this example uses the same state as above, the two editors contents are shared and can be modified by either one.

rx.editor(
    set_contents=EditorState.content,
    set_options=rx.EditorOptions(
        button_list=[
            ["font", "fontSize", "formatBlock"],
            ["fontColor", "hiliteColor"],
            [
                "bold",
                "underline",
                "italic",
                "strike",
                "subscript",
                "superscript",
            ],
            ["removeFormat"],
            "/",
            ["outdent", "indent"],
            ["align", "horizontalRule", "list", "table"],
            ["link"],
            ["fullScreen", "showBlocks", "codeView"],
            ["preview", "print"],
        ]
    ),
    on_change=EditorState.handle_change,
)

See the Suneditor README.md for more details on buttons and options.

A Rich Text Editor component based on SunEditor. Not every JS prop is listed here (some are not easily usable from python), refer to the library docs for a complete list.

PropTypeDescriptionValues
langUnion

Language of the editor. Alternatively to a string, a dict of your language can be passed to this prop. Please refer to the library docs for this. options: "en" | "da" | "de" | "es" | "fr" | "ja" | "ko" | "pt_br" | "ru" | "zh_cn" | "ro" | "pl" | "ckb" | "lv" | "se" | "ua" | "he" | "it" default : "en"

namestr

This is used to set the HTML form name of the editor. This means on HTML form submission, it will be submitted together with contents of the editor by the name provided.

default_valuestr

Sets the default value of the editor. This is useful if you don't want the on_change method to be called on render. If you want the on_change method to be called on render please use the set_contents prop

widthstr

Sets the width of the editor. px and percentage values are accepted, eg width="100%" or width="500px" default: 100%

heightstr

Sets the height of the editor. px and percentage values are accepted, eg height="100%" or height="100px"

placeholderstr

Sets the placeholder of the editor.

auto_focusbool

Should the editor receive focus when initialized?

set_optionsDict

Pass an EditorOptions instance to modify the behaviour of Editor even more.

set_all_pluginsbool

Whether all SunEditor plugins should be loaded. default: True

set_contentsstr

Set the content of the editor. Note: To set the initial contents of the editor without calling the on_change event, please use the default_value prop. set_contents is used to set the contents of the editor programmatically. You must be aware that, when the set_contents's prop changes, the on_change event is triggered.

append_contentsstr

Append editor content

set_default_stylestr

Sets the default style of the editor's edit area

disablebool

Disable the editor default: False

hidebool

Hide the editor default: False

hide_toolbarbool

Hide the editor toolbar default: False

disable_toolbarbool

Disable the editor toolbar default: False

Event Triggers

TriggerDescription
on_blur

Function or event handler called when focus has left the element (or left some element inside of it). For example, it is called when the user clicks outside of a focused text input.

on_change

The on_change event handler is called when the value or checked state of the component changes.

on_input

The on_input event handler is called when the editor receives input from the user. It receives the raw browser event as an argument.

on_load

The on_load event handler is called when the user loads a form. For example, it is called when the user clicks on a load button.

on_resize_editor

The on_resize_editor event handler is called when the editor is resized. It receives the height and previous height as arguments.

on_copy

The on_copy event handler is called when the user copies text from the editor. It receives the clipboard data as an argument.

on_cut

The on_cut event handler is called when the user cuts text from the editor. It receives the clipboard data as an argument.

on_paste

The on_paste event handler is called when the user pastes text into the editor. It receives the clipboard data and max character count as arguments.

toggle_code_view

The toggle_code_view event handler is called when the user toggles code view. It receives a boolean whether code view is active.

toggle_full_screen

The toggle_full_screen event handler is called when the user toggles full screen. It receives a boolean whether full screen is active.

← DebounceForm →

Did you find this useful?