テキストエディタVueコンポーネント

    テキストエディタVueコンポーネントは、テキストエディタコンポーネントを表します。

    テキストエディタのコンポーネント

    以下のコンポーネントが含まれています。

    • f7-text-editor

    テキストエディタのプロパティ

    PropTypeDefaultDescription
    <f7-text-editor> properties
    valuestring

    テキストエディタの初期htmlコンテンツの値です。

    placeholderstringエディターのプレースホルダーが空のときに表示されるコンテンツです。デフォルトでは指定されていません。
    resizablebooleanfalseエディタのサイズを変更可能にします(高さがコンテンツに合う場合)。
    modestringtoolbar

    テキスト・エディタのボタン・モード。次のようになります。

    • toolbar - テキストエディタのコンテナ要素に、エディタボタン付きのツールバーを追加します。
    • popover - エディタで選択されたテキストの上に、エディタボタンの付いたポップオーバーバブルを表示します。
    • keyboard-toolbar - エディタがフォーカスされているときに、仮想キーボードの上にエディタボタン付きのツールバーが表示されます。この機能は、iOS、Androidのcordovaアプリ、AndroidのChromeでのみサポートされています。サポートされていない場合は、popover モードにフォールバックします。
    buttonsarray

    エディタボタンを持つ配列、または、エディタボタンを持つ配列(グループ)の配列です。デフォルトでは、すべてのボタンが有効で、そのデフォルト値は:

    [
      ['bold', 'italic', 'underline', 'strikeThrough'],
      ['orderedList', 'unorderedList'],
      ['link', 'image'],
      ['paragraph', 'h1', 'h2', 'h3'],
      ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'],
      ['subscript', 'superscript'],
      ['indent', 'outdent'],
    ]
    dividersbooleantrueボタングループの間に、視覚的な仕切りを追加します。
    image-url-textstringInsert image URLイメージのURLリクエストに表示されるプロンプトテキスト
    link-url-textstringInsert link URLリンクのURLリクエスト時に表示されるプロンプトテキスト
    clear-formatting-on-pastebooleantrue有効にすると、クリップボードからのペースト時にフォーマットをクリアします。
    custom-buttonsobject

    カスタムボタンを持つオブジェクトです。オブジェクトのプロパティkeyには、buttonsで有効にするボタンのidを指定します。

    例えば、<hr>を追加するカスタムボタンを指定するには、以下の宣言を使用します。

    <f7-text-editor
      :custom-buttons="customButtons"
      :buttons="buttons"
    />
    {
      customButtons: {
        // property keyはボタンのIDです。
        hr: {
          // ボタンのHTMLコンテンツ
          content: '&lt;hr&gt;',
          // ボタンのクリックハンドラ
          onClick(event, buttonEl) {
            document.execCommand('insertHorizontalRule', false);
          }
        }
      },
      // ここでは、カスタムボタンのidとして "hr "を使い、ボタンに追加します。
      buttons: ['bold', 'italic', 'hr']
    }

    テキストエディタイベント

    EventArgumentsDescription
    <f7-text-editor> events
    texteditor:change(value)エディタの値が変更されるとイベントが発生します。
    texteditor:inputイベントは、エディタのコンテンツの "input "イベントで発生します。
    texteditor:focusイベントは、エディタのコンテンツのフォーカスで発生します。
    texteditor:blurイベントは、エディタのコンテンツのぼかしでトリガされます。
    texteditor:buttonclick(buttonId)イベントは、エディタボタンのクリックでトリガされます。
    texteditor:keyboardopenイベントは、エディタキーボードツールバーが表示されたときにトリガされます。
    texteditor:keyboardcloseイベントは、エディタキーボードツールバーが消えたときにトリガされます。
    texteditor:popoveropenイベントはエディタポップオーバーオープンでトリガされます。
    texteditor:popovercloseイベントはエディタポップオーバーが閉じた時に発生します。
    texteditor:beforedestroyイベントは、テキストエディタのインスタンスが破壊される直前にトリガされます。

    Examples

    <template>
    <f7-page>
      <f7-navbar title="Text Editor"></f7-navbar>
    
      <f7-block-title>Default Setup</f7-block-title>
      <f7-text-editor></f7-text-editor>
    
      <f7-block-title>With Placeholder</f7-block-title>
      <f7-text-editor
        placeholder="Enter text..."
      ></f7-text-editor>
    
      <f7-block-title>With Default Value</f7-block-title>
      <f7-text-editor
        placeholder="Enter text..."
        :value="customValue"
        @texteditor:change="(v) => customValue = v"
      ></f7-text-editor>
    
      <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-text-editor>
    
      <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-text-editor>
    
      <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-text-editor>
    
      <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-text-editor>
    
      <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-text-editor>
    
      <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>
        <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-input>
      </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 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>