Text Editor - 图1

Text Editor Vue Component

Text Editor Vue component represents Text Editor component.

Text Editor Components

There are following components included:

  • f7-text-editor

Text Editor Properties

PropTypeDefaultDescription
<f7-text-editor> properties
valuestring

Text editor initial html content value.

placeholderstringEditor placeholder content displayed when it is empty. By default it is not specified
resizablebooleanfalseMakes editor resizable (when its height will fit to its content)
modestringtoolbar

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.
buttonsarray

Array with editor buttons, or array of arrays (groups) with editor buttons. By default all buttons enabled and its default value is:

  1. [
  2.   [‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’],
  3.   [‘orderedList’, ‘unorderedList’],
  4.   [‘link’, ‘image’],
  5.   [‘paragraph’, ‘h1’, ‘h2’, ‘h3’],
  6.   [‘alignLeft’, ‘alignCenter’, ‘alignRight’, ‘alignJustify’],
  7.   [‘subscript’, ‘superscript’],
  8.   [‘indent’, ‘outdent’],
  9. ]
dividersbooleantrueAdds visual divider between buttons group
imageUrlTextstringInsert image URLPrompt text that appears on image url request
linkUrlTextstringInsert link URLPrompt text that appears on link url request
clearFormattingOnPastebooleantrueWhen enabled it will clear any formatting on paste from clipboard
customButtonsobject

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:

  1. <f7-text-editor
  2.   :custom-buttons=”customButtons”
  3.   :buttons=”buttons”
  4. />
  1. {
  2.   customButtons: {
  3.     // property key is the button id
  4.     hr: {
  5.       // button html content
  6.       content: ‘&lt;hr&gt;’,
  7.       // button click handler
  8.       onClick(event, buttonEl) {
  9.         document.execCommand(‘insertHorizontalRule’, false);
  10.       }
  11.     }
  12.   },
  13.   // now we use custom button id “hr” to add it to buttons
  14.   buttons: [‘bold’, ‘italic’, ‘hr’]
  15. }

Text Editor Events

EventArgumentsDescription
<f7-text-editor> events
texteditor:change(value)Event will be triggered when editor value has been changed
texteditor:inputEvent will be triggered on editor’s content “input” event
texteditor:focusEvent will be triggered on editor’s content focus
texteditor:blurEvent will be triggered on editor’s content blur
texteditor:buttonclick(buttonId)Event will be triggered on editor button click
texteditor:keyboardopenEvent will be triggered when editor keyboard toolbar appears
texteditor:keyboardcloseEvent will be triggered when editor keyboard toolbar disappears
texteditor:popoveropenEvent will be triggered on editor popover open
texteditor:popovercloseEvent will be triggered on editor popover close
texteditor:beforedestroyEvent 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

  1. <template>
  2.   <f7-page>
  3.     <f7-navbar title="Text Editor"></f7-navbar>
  5.     <f7-block-title>Default Setup</f7-block-title>
  6.     <f7-text-editor />
  8.     <f7-block-title>With Placeholder</f7-block-title>
  9.     <f7-text-editor
  10.       placeholder="Enter text..."
  11.     />
  13.     <f7-block-title>With Default Value</f7-block-title>
  14.     <f7-text-editor
  15.       placeholder="Enter text..."
  16.       :value="customValue"
  17.       @texteditor:change="(v) => customValue = v"
  18.     />
  20.     <f7-block-title>Specific Buttons</f7-block-title>
  21.     <f7-block-header>It is possible to customize which buttons (commands) to show.</f7-block-header>
  22.     <f7-text-editor
  23.       placeholder="Enter text..."
  24.       :buttons="[
  25.         ['bold', 'italic', 'underline', 'strikeThrough'],
  26.         ['orderedList', 'unorderedList']
  27.       ]"
  28.     />
  30.     <f7-block-title>Custom Button</f7-block-title>
  31.     <f7-block-header>It is possible to create custom editor buttons. Here is the custom "hr" button that adds horizontal rule:</f7-block-header>
  32.     <f7-text-editor
  33.       placeholder="Enter text..."
  34.       :customButtons="customButtons"
  35.       :buttons="[
  36.         ['bold', 'italic', 'underline', 'strikeThrough'],
  37.         'hr'
  38.       ]"
  39.     />
  41.     <f7-block-title>Resizable</f7-block-title>
  42.     <f7-block-header>Editor will be resized based on its content.</f7-block-header>
  43.     <f7-text-editor
  44.       placeholder="Enter text..."
  45.       resizable
  46.       :buttons="['bold', 'italic', 'underline', 'strikeThrough']"
  47.     />
  49.     <f7-block-title>Popover Mode</f7-block-title>
  50.     <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>
  51.     <f7-text-editor
  52.       placeholder="Enter text..."
  53.       mode="popover"
  54.       :buttons="['bold', 'italic', 'underline', 'strikeThrough']"
  55.       style="--f7-text-editor-height: 150px"
  56.     />
  58.     <f7-block-title>Keyboard Toolbar Mode</f7-block-title>
  59.     <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>
  60.     <f7-text-editor
  61.       placeholder="Enter text..."
  62.       mode="keyboard-toolbar"
  63.       style="--f7-text-editor-height: 150px"
  64.     />
  66.     <f7-block-title>As List Input</f7-block-title>
  67.     <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>
  68.     <f7-list>
  69.       <f7-list-input
  70.         type="text"
  71.         label="Name"
  72.         placeholder="Your name"
  73.       />
  74.       <f7-list-input
  75.         type="texteditor"
  76.         label="About"
  77.         placeholder="About"
  78.         resizable
  79.         :textEditorParams="{
  80.           mode: 'popover',
  81.           buttons: ['bold', 'italic', 'underline', 'strikeThrough']
  82.         }"
  83.         :value="listEditorValue"
  84.         @texteditor:change="(value) => listEditorValue = value"
  85.       />
  86.     </f7-list>
  87.   </f7-page>
  88. </template>
  89. <script>
  90.   export default {
  91.     data() {
  92.       return {
  93.         customButtons: {
  94.           hr: {
  95.             content: '&lt;hr&gt;',
  96.             onClick(editor, buttonEl) {
  97.               document.execCommand('insertHorizontalRule', false);
  98.             },
  99.           },
  100.         },
  101.         customValue: '<p>Lorem, ipsum dolor sit amet ...</p>',
  102.         listEditorValue: '',
  103.       }
  104.     },
  105.   };
  106. </script>

← Tabs

Toggle →