Text Editor React Component

Text Editor React Component

Text Editor React component represents Text Editor component.

Text Editor Components

There are following components included:

TextEditor / F7TextEditor

Text Editor Properties

Prop	Type	Default	Description
<TextEditor> properties
value	string		Text editor initial html content value.
placeholder	string		Editor placeholder content displayed when it is empty. By default it is not specified
resizable	boolean	false	Makes editor resizable (when its height will fit to its content)
mode	string	toolbar	Text editor buttons mode. Can be: `toolbar` - it will add toolbar with editor buttons in text editor container element `popover` - it will show popover bubble with editor buttons on top of the selected text in editor `keyboard-toolbar` - toolbar with editor buttons will appear on top of virtual keyboard when editor is in the focus. It is supported only in iOS, Android cordova apps and in Android Chrome. When not supported it will fallback to `popover` mode.
buttons	array		Array with editor buttons, or array of arrays (groups) with editor buttons. By default all buttons enabled and its default value is: `[` `[‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’],` `[‘orderedList’, ‘unorderedList’],` `[‘link’, ‘image’],` `[‘paragraph’, ‘h1’, ‘h2’, ‘h3’],` `[‘alignLeft’, ‘alignCenter’, ‘alignRight’, ‘alignJustify’],` `[‘subscript’, ‘superscript’],` `[‘indent’, ‘outdent’],` `]`
dividers	boolean	true	Adds visual divider between buttons group
imageUrlText	string	Insert image URL	Prompt text that appears on image url request
linkUrlText	string	Insert link URL	Prompt text that appears on link url request
clearFormattingOnPaste	boolean	true	When enabled it will clear any formatting on paste from clipboard
customButtons	object		Object with custom buttons. Object property key is the button id that should be used in `buttons` to enable it. For example to specify custom button that will add `<hr>` we can use following declaration: `<TextEditor` `customButtons={{` `// property key is the button id` `hr: {` `// button html content` `content: ‘<hr>’,` `// button click handler` `onClick(event, buttonEl) {` `document.execCommand(‘insertHorizontalRule’, false);` `}` `}` `}}` `{/ now we use custom button id “hr” to add it to buttons /}` `buttons={[‘bold’, ‘italic’, ‘hr’]}` `/>` `

Text Editor Events

Event	Arguments	Description
<TextEditor> events
textEditorChange	(value)	Event will be triggered when editor value has been changed
textEditorInput		Event will be triggered on editor’s content “input” event
textEditorFocus		Event will be triggered on editor’s content focus
textEditorBlur		Event will be triggered on editor’s content blur
textEditorButtonClick	(buttonId)	Event will be triggered on editor button click
textEditorKeyboardOpen		Event will be triggered when editor keyboard toolbar appears
textEditorKeyboardClose		Event will be triggered when editor keyboard toolbar disappears
textEditorPopoverOpen		Event will be triggered on editor popover open
textEditorPopoverClose		Event will be triggered on editor popover close
textEditorBeforeDestroy		Event will be triggered right before Text Editor instance will be destroyed

Access To Text Editor Instance

If you need to use Text Editor API you can access its initialized instance by accessing .f7TextEditor component’s property.

Examples

export default class extends React.Component {
  constructor() {
    super();
    this.state = {
      customButtons: {
        hr: {
          content: '&lt;hr&gt;',
          onClick(editor, buttonEl) {
            document.execCommand('insertHorizontalRule', false);
          },
        },
      },
      customValue: '<p>Lorem, ipsum dolor sit amet consectetur adipisicing...</p>',
      listEditorValue: '',
    };
  }
  render() {
    return (
      <Page>
        <Navbar title="Text Editor"></Navbar>
        <BlockTitle>Default Setup</BlockTitle>
        <TextEditor />
        <BlockTitle>With Placeholder</BlockTitle>
        <TextEditor
          placeholder="Enter text..."
        />
        <BlockTitle>With Default Value</BlockTitle>
        <TextEditor
          placeholder="Enter text..."
          value={this.state.customValue}
          onTextEditorChange={(value) => this.setState({ customValue: value })}
        />
        <BlockTitle>Specific Buttons</BlockTitle>
        <BlockHeader>It is possible to customize which buttons (commands) to show.</BlockHeader>
        <TextEditor
          placeholder="Enter text..."
          buttons={[
            ['bold', 'italic', 'underline', 'strikeThrough'],
            ['orderedList', 'unorderedList']
          ]}
        />
        <BlockTitle>Custom Button</BlockTitle>
        <BlockHeader>It is possible to create custom editor buttons. Here is the custom "hr" button that adds horizontal rule:</BlockHeader>
        <TextEditor
          placeholder="Enter text..."
          customButtons={this.state.customButtons}
          buttons={[
            ['bold', 'italic', 'underline', 'strikeThrough'],
            'hr'
          ]}
        />
        <BlockTitle>Resizable</BlockTitle>
        <BlockHeader>Editor will be resized based on its content.</BlockHeader>
        <TextEditor
          placeholder="Enter text..."
          resizable
          buttons={['bold', 'italic', 'underline', 'strikeThrough']}
        />
        <BlockTitle>Popover Mode</BlockTitle>
        <BlockHeader>In this mode, there is no toolbar with buttons, but they appear as popover when you select any text in editor.</BlockHeader>
        <TextEditor
          placeholder="Enter text..."
          mode="popover"
          buttons={['bold', 'italic', 'underline', 'strikeThrough']}
          style={{'--f7-text-editor-height': '150px'}}
        />
        <BlockTitle>Keyboard Toolbar Mode</BlockTitle>
        <BlockHeader>In this mode, toolbar with buttons will appear on top of virtual keyboard when editor is in the focus. It is supported only in iOS, Android cordova apps and in Android Chrome. When not supported it will fallback to "popover" mode.</BlockHeader>
        <TextEditor
          placeholder="Enter text..."
          mode="keyboard-toolbar"
          style={{'--f7-text-editor-height': '150px'}}
        />
        <BlockTitle>As List Input</BlockTitle>
        <BlockHeader>Text editor can be used in list with other inputs. In this example it is enabled with "keyboard-toolbar"/"popover" type for "About" field.</BlockHeader>
        <List>
          <ListInput
            type="text"
            label="Name"
            placeholder="Your name"
          />
          <ListInput
            type="texteditor"
            label="About"
            placeholder="About"
            resizable
            textEditorParams={{
              mode: 'popover',
              buttons: ['bold', 'italic', 'underline', 'strikeThrough']
            }}
            value={this.state.listEditorValue}
            onTextEditorChange={(value) => this.setState({listEditorValue: value})}
          />
        </List>
      </Page>
    );
  }
}

← Tabs

Toggle →