Text Editor Vue Component
- Text Editor Components
- Text Editor Properties
- Text Editor Events
- Access To Text Editor Instance
- Examples
Text Editor Vue component represents Text Editor component.
Text Editor Components
There are following components included:
f7-text-editor
Text Editor Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-text-editor> 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:
|
buttons | array | Array with editor buttons, or array of arrays (groups) with editor buttons. By default all buttons enabled and its default value is:
| |
dividers | boolean | true | Adds visual divider between buttons group |
image-url-text | string | Insert image URL | Prompt text that appears on image url request |
link-url-text | string | Insert link URL | Prompt text that appears on link url request |
clear-formatting-on-paste | boolean | true | When enabled it will clear any formatting on paste from clipboard |
custom-buttons | object | Object with custom buttons. Object property key is the button id that should be used in For example to specify custom button that will add
|
Text Editor Events
Event | Arguments | Description |
---|---|---|
<f7-text-editor> events | ||
texteditor:change | (value) | Event will be triggered when editor value has been changed |
texteditor:input | Event will be triggered on editor's content "input" event | |
texteditor:focus | Event will be triggered on editor's content focus | |
texteditor:blur | Event will be triggered on editor's content blur | |
texteditor:buttonclick | (buttonId) | Event will be triggered on editor button click |
texteditor:keyboardopen | Event will be triggered when editor keyboard toolbar appears | |
texteditor:keyboardclose | Event will be triggered when editor keyboard toolbar disappears | |
texteditor:popoveropen | Event will be triggered on editor popover open | |
texteditor:popoverclose | Event will be triggered on editor popover close | |
texteditor:beforedestroy | 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
<template>
<f7-page>
<f7-navbar title="Text Editor"></f7-navbar>
<f7-block-title>Default Setup</f7-block-title>
<f7-text-editor />
<f7-block-title>With Placeholder</f7-block-title>
<f7-text-editor
placeholder="Enter text..."
/>
<f7-block-title>With Default Value</f7-block-title>
<f7-text-editor
placeholder="Enter text..."
:value="customValue"
@texteditor:change="(v) => customValue = v"
/>
<f7-block-title>Specific Buttons</f7-block-title>
<f7-block-header>It is possible to customize which buttons (commands) to show.</f7-block-header>
<f7-text-editor
placeholder="Enter text..."
:buttons="[
['bold', 'italic', 'underline', 'strikeThrough'],
['orderedList', 'unorderedList']
]"
/>
<f7-block-title>Custom Button</f7-block-title>
<f7-block-header>It is possible to create custom editor buttons. Here is the custom "hr" button that adds horizontal rule:</f7-block-header>
<f7-text-editor
placeholder="Enter text..."
:customButtons="customButtons"
:buttons="[
['bold', 'italic', 'underline', 'strikeThrough'],
'hr'
]"
/>
<f7-block-title>Resizable</f7-block-title>
<f7-block-header>Editor will be resized based on its content.</f7-block-header>
<f7-text-editor
placeholder="Enter text..."
resizable
:buttons="['bold', 'italic', 'underline', 'strikeThrough']"
/>
<f7-block-title>Popover Mode</f7-block-title>
<f7-block-header>In this mode, there is no toolbar with buttons, but they appear as popover when you select any text in editor.</f7-block-header>
<f7-text-editor
placeholder="Enter text..."
mode="popover"
:buttons="['bold', 'italic', 'underline', 'strikeThrough']"
style="--f7-text-editor-height: 150px"
/>
<f7-block-title>Keyboard Toolbar Mode</f7-block-title>
<f7-block-header>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.</f7-block-header>
<f7-text-editor
placeholder="Enter text..."
mode="keyboard-toolbar"
style="--f7-text-editor-height: 150px"
/>
<f7-block-title>As List Input</f7-block-title>
<f7-block-header>Text editor can be used in list with other inputs. In this example it is enabled with "keyboard-toolbar"/"popover" type for "About" field.</f7-block-header>
<f7-list>
<f7-list-input
type="text"
label="Name"
placeholder="Your name"
/>
<f7-list-input
type="texteditor"
label="About"
placeholder="About"
resizable
:textEditorParams="{
mode: 'popover',
buttons: ['bold', 'italic', 'underline', 'strikeThrough']
}"
:value="listEditorValue"
@texteditor:change="(value) => listEditorValue = value"
/>
</f7-list>
</f7-page>
</template>
<script>
export default {
data() {
return {
customButtons: {
hr: {
content: '<hr>',
onClick(editor, buttonEl) {
document.execCommand('insertHorizontalRule', false);
},
},
},
customValue: '<p>Lorem, ipsum dolor sit amet ...</p>',
listEditorValue: '',
}
},
};
</script>