Notebook

In [ ]:

import panel as pn
import param

pn.extension('texteditor')

The TextEditor widget provides a WYSIWYG (what-you-see-is-what-you-get) rich text editor into a Panel application which outputs HTML. The editor is built on top of the Quill.js library.

Parameters:¶

For layout and styling related parameters see the customization user guide.

disabled (boolean): Whether the editor is disabled
mode (str): Whether to display a 'toolbar' or a 'bubble' menu on highlight.
placeholder (str): Placeholder output to render when the editor is empty.
toolbar (boolean or list): Toolbar configuration either as a boolean toggle or a configuration specified as a list.
value (str): The current HTML output of the widget

To construct a TextEditor editor widget we must declare it explicitly and may provide a placeholder as pure text or a value as HTML:

In [ ]:

wysiwyg = pn.widgets.TextEditor(placeholder='Enter some text')
wysiwyg

The current state of the editor output is reflected on the value parameter:

In [ ]:

wysiwyg.value

The value may also be set:

In [ ]:

wysiwyg.value = '<h1>A title</h1>'

The toolbar of the editor can be configured in a variety of ways, the simplest of which is simply toggling it on and off by setting toolbar=True/False. Beyond that we can provide the formatting options to display in a number of configurations which are explained in the quill.js documentation. The examples below

In [ ]:

pn.config.sizing_mode = 'stretch_width'

# Flat list of options
flat = pn.widgets.TextEditor(toolbar=['bold', 'italic', 'underline'])

# Grouped options
grouped = pn.widgets.TextEditor(toolbar=[['bold', 'italic'], ['link', 'image']])

# Dropdown of options
dropdown = pn.widgets.TextEditor(toolbar=[{'size': [ 'small', False, 'large', 'huge' ]}])

# Full configuration
full_config = pn.widgets.TextEditor(toolbar=[
  ['bold', 'italic', 'underline', 'strike'],        # toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               # custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      # superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          # outdent/indent
  [{ 'direction': 'rtl' }],                         # text direction

  [{ 'size': ['small', False, 'large', 'huge'] }],  # custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, False] }],

  [{ 'color': [] }, { 'background': [] }],          # dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         # remove formatting button
])

pn.Column(
    pn.Row(flat, grouped, dropdown),
    full_config
)

Instead of a toolbar we can also switch to 'bubble' mode which displays a hover menu when highlighting the text:

In [ ]:

pn.widgets.TextEditor(mode='bubble', value='Highlight me to edit formatting', margin=(40, 0, 0, 0), height=200, width=400)

Controls¶

The TextEditor widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:

In [ ]:

editor = pn.widgets.TextEditor(placeholder='Enter some text')

pn.Row(editor.controls(jslink=True, sizing_mode='fixed'), editor)

Parameters:¶

Toolbar¶

Controls¶