[ Learn ]
[ Concepts ]
[ Reference ]
Editor
An HTML editor component based on Suneditor .
Editor content
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%",
),
)EditorOptions
The extended options and toolbar buttons can be customized by passing an instance
of rx.EditorOptions for the set_options prop.
Fields
| Field | Description |
|---|---|
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.
def editor_toolbar_example():
return 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.
Editor
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.
Copyright © 2023 Pynecone, Inc.