赞助商成为赞助商

文本编辑器 Vue 组件

文本编辑器 Vue 组件表示文本编辑器组件。

文本编辑器组件

包含以下组件

文本编辑器属性

道具类型默认描述
<f7-text-editor> 属性
值字符串

文本编辑器初始的 html 内容值。

占位符字符串编辑器占位符内容在编辑器为空时显示。默认情况下未指定
resizable布尔值false使编辑器可以调整大小（其高度将适应其内容）
模式字符串工具栏

文本编辑器按钮模式。可以是

  • toolbar - 它将在文本编辑器容器元素中添加带编辑器按钮的工具栏
  • popover - 它将在编辑器中选中文本的上方显示带有编辑器按钮的弹出气泡
  • keyboard-toolbar - 当编辑器获得焦点时，带有编辑器按钮的工具栏将出现在虚拟键盘上方。它仅在 iOS、Android cordova 应用和 Android Chrome 中受支持。如果不支持，它将回退到 popover 模式。
按钮数组

带有编辑器按钮的数组，或带有编辑器按钮的数组（组）数组。默认情况下所有按钮都已启用，其默认值为

[
  ['bold', 'italic', 'underline', 'strikeThrough'],
  ['orderedList', 'unorderedList'],
  ['link', 'image'],
  ['paragraph', 'h1', 'h2', 'h3'],
  ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'],
  ['subscript', 'superscript'],
  ['indent', 'outdent'],
]
分隔符布尔值true在按钮组之间添加可视分隔符
图像 URL 文本字符串插入图像 URL在图像 URL 请求中显示的提示文本
链接 URL 文本字符串插入链接 URL在链接 URL 请求中显示的提示文本
粘贴时清除格式布尔值true启用后，它将在从剪贴板粘贴时清除所有格式
自定义按钮对象

包含自定义按钮的对象。对象属性键是按钮 id，应在 buttons 中使用该 id 以启用它。

例如，要指定将添加 <hr> 的自定义按钮，我们可以使用以下声明

<f7-text-editor
  :custom-buttons="customButtons"
  :buttons="buttons"
/>
{
  customButtons: {
    // property key is the button id
    hr: {
      // button html content
      content: '&lt;hr&gt;',
      // 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']
}

文本编辑器事件

事件参数描述
<f7-text-editor> 事件
texteditor:change(值)当编辑器值发生更改时将触发事件
texteditor:input将在编辑器内容的“input”事件中触发事件
texteditor:focus将在编辑器内容获得焦点时触发事件
texteditor:blur将在编辑器内容失去焦点时触发事件
texteditor:buttonclick(按钮 ID)将在单击编辑器按钮时触发事件
texteditor:keyboardopen当编辑器键盘工具栏出现时将触发事件
texteditor:keyboardclose当编辑器键盘工具栏消失时将触发事件
texteditor:popoveropen将在编辑器弹出窗口打开时触发事件
texteditor:popoverclose将在编辑器弹出窗口关闭时触发事件
texteditor:beforedestroy在 Text Editor 实例被销毁之前会触发事件

示例

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>
改进此文档
在此页面上