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

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: `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
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 `buttons` to enable it. For example to specify custom button that will add `<hr>` we can use following declaration: `<f7-text-editor :custom-buttons="customButtons" :buttons="buttons" />` `{ 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
<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

Examples

text-editor.vue

<template>
  <f7-page>
    <f7-navbar title="Text Editor"></f7-navbar>
    <f7-block>
      <p>
        Framework7 comes with a touch-friendly Rich Text Editor component. It is based on modern
        "contenteditable" API so it should work everywhere as is.
      </p>
      <p>
        It comes with the basic set of formatting features. But its functionality can be easily
        extended and customized to fit any requirements.
      </p>
    </f7-block>

    <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..."
      :custom-buttons="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 strong-ios dividers-ios outline-ios>
      <f7-list-input type="text" label="Name" placeholder="Your name" />
      <f7-list-input
        type="texteditor"
        label="About"
        placeholder="About"
        resizable
        :text-editor-params="{
          mode: 'popover',
          buttons: ['bold', 'italic', 'underline', 'strikeThrough'],
        }"
        :value="listEditorValue"
        @texteditor:change="(value) => (listEditorValue = value)"
      />
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Page,
  f7Navbar,
  f7BlockTitle,
  f7BlockHeader,
  f7Block,
  f7TextEditor,
  f7List,
  f7ListInput,
} from 'framework7-vue';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7BlockHeader,
    f7Block,
    f7TextEditor,
    f7List,
    f7ListInput,
  },
  data() {
    return {
      customButtons: {
        hr: {
          content: '<hr>',
          onClick() {
            document.execCommand('insertHorizontalRule', false);
          },
        },
      },
      customValue: `<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur sunt, sapiente quis eligendi consectetur hic asperiores assumenda quidem dolore quasi iusto tenetur commodi qui ullam sint sed alias! Consequatur, dolor!</p>
        <p>Provident reiciendis exercitationem reprehenderit amet repellat laborum, sequi id quam quis quo quos facere veniam ad libero dolorum animi. Nobis, illum culpa explicabo dolorem vitae ut dolor at reprehenderit magnam?</p>
        <p>Qui, animi. Dolores dicta, nobis aut expedita enim eum assumenda modi, blanditiis voluptatibus excepturi non pariatur. Facilis fugit facere sequi molestias nemo in, suscipit inventore consequuntur, repellat perferendis, voluptas odit.</p>
        <p>Tempora voluptates, doloribus architecto eligendi numquam facilis perspiciatis autem quam voluptas maxime ratione harum laudantium cum deleniti. In, alias deserunt voluptatibus eligendi libero nobis est unde et perspiciatis cumque voluptatum.</p>
        <p>Quam error doloribus qui laboriosam eligendi. Aspernatur quam pariatur perspiciatis reprehenderit atque dicta culpa, aut rem? Assumenda, quibusdam? Reprehenderit necessitatibus facere nemo iure maiores porro voluptates accusamus quibusdam. Nesciunt, assumenda?</p>`,
      listEditorValue: '',
    };
  },
};
</script>

Improve this Doc

On this page

Text Editor Components
Text Editor Properties
Text Editor Events
Examples