最新的 vue-quill 中文文档赶快收藏吧最新的 vue-quill 中文文档赶快收藏吧最新的 vue-qui

介绍

警告

🚀 VueQuill是@1.2.0版本！目前的重点是首先使VueQuill稳定并完成功能。目前还不建议将其用于任何严重的情况。它的一些功能尚未“最终确定”，随着时间的推移，随着我们发现更好的解决方案，它们将发生突破性的变化。

VueQuill是什么

VueQuill是一个用于构建富文本编辑器的组件，由Vue 3和Quill提供支持。

什么是Quill

Quill是一个为兼容性和可扩展性而构建的现代富文本编辑器。它由陈和拜伦·米利根创作，并由斯拉布积极维护。

您可以在Why Quill指南中了解更多关于该项目背后的基本原理。

浏览器支持

跨平台支持对许多Javascript库来说很重要，但这意味着什么的标准往往不同。对于Quill来说，酒吧不仅仅是它运行或工作，它必须以同样的方式运行或工作。功能不仅是跨平台的考虑因素，用户和开发人员的体验也是如此。如果某些内容在OSX上的Chrome中产生特定的标记，它将在IE上产生相同的标记。如果在Windows上的Firefox中按enter键保留粗体格式状态，它将保留在移动Safari上。

Quill支持台式机、平板电脑和手机上的所有现代浏览器。体验相同的一致行为，并跨平台生成HTML。更多详细信息请参见图表。

社区

如果您有疑问或需要帮助，请通过GitHub讨论联系社区。

安装

提示

本指南假设对Vue 3有中级了解。如果你是Vue 3的新手，先掌握Vue 3的基础知识，然后再回来，但这不是必需的。

CDN

VueQuill作为UMD模块提供，可在浏览器中访问。在浏览器中加载后，您可以通过VueQuill访问组件。QuillEditor全局变量。您需要加载Vue.js、VueQuill js和VueQuil CSS主题。

<!-- include VueJS first -->
  <script src="https://unpkg.com/vue@next"></script>

  <!-- use the latest VueQuill release -->
  <script src="https://unpkg.com/@vueup/vue-quill@latest"></script>
  <link rel="stylesheet" href="https://unpkg.com/@vueup/vue-quill@latest/dist/vue-quill.snow.prod.css">

  <!-- or point to a specific VueQuill release -->
  <script src="https://unpkg.com/@vueup/vue-quill@1.2.0"></script>
  <link rel="stylesheet" href="https://unpkg.com/@vueup/vue-quill@1.2.0/dist/vue-quill.snow.prod.css">

警告

对于生产，我们建议链接到特定的版本号和版本，以避免新版本的意外中断。

npm/yarn

npm install @vueup/vue-quill@latest --save

OR

yarn add @vueup/vue-quill@latest

当您使用Single File Component时，建议使用npm或yarn安装方法，然后您可以在应用程序中注册该组件。

使用

在浏览器中

在javascript中注册组件：

Vue.component('QuillEditor', VueQuill.QuillEditor);

基本用法：

<div id="app">
  <quill-editor theme="snow"></quill-editor>
</div>

信息

我们在这里向您展示了一个简单的示例，但在典型的Vue应用程序中，我们使用单文件组件而不是字符串模板。您可以在本节中找到SFC的实施。

在单个文件组件中

全局注册：

import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const app = createApp()
app.component('QuillEditor', QuillEditor)

或本地注册：

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  components: {
    QuillEditor
  }
}

基本用法：

<template>
  <QuillEditor theme="snow" />
</template>

笔记

组件本身不包含任何CSS主题。您需要单独包含它：导入“@vueup/vue quill/dist/vue quill.snow.css”或导入“@vueup/vue quill/dist/vue quill.bubble.css”

主题

Quill有两个官方支持的主题：snow 和 bubble。主题主要通过其CSS样式表控制Quill的视觉外观，通过覆盖这些规则可以很容易地进行许多更改。至少，必须包含核心主题，以便工具栏或工具提示等模块正常工作。

要激活主题，请导入要使用的主题的样式表。

import '@vueup/vue-quill/dist/vue-quill.snow.css';
// OR | AND
import '@vueup/vue-quill/dist/vue-quill.bubble.css';
// you can use both themes at the same time and use them interchangeably

这些样式表可以在Quill发行版中找到，但为了方便起见，它们也链接在VueQuill的dist文件夹中。

然后，将主题的名称传递给主题props。

<template>
  <QuillEditor theme="snow" .../>
</template>

工具栏

工具栏模块允许用户轻松格式化Quill的内容。它可以配置工具栏道具。

有三种方法可以配置工具栏：

预配置工具栏选项

VueQuill提供了3个预配置的工具栏选项——基本、最小、完整和“”——以使用默认选项。

<template>
  <QuillEditor toolbar="minimal" .../>
</template>

自定义工具栏选项

您还可以设置自己的选项，如下所示：

<template>
  <QuillEditor :toolbar="['bold', 'italic', 'underline']" .../>
</template>

查看更多工具链的配置 Quill toolbar docs

自定义工具栏容器

<template>
  <QuillEditor toolbar="#my-toolbar" ...>
    <template #toolbar>
      <div id="my-toolbar">
        <!-- Add buttons as you would before -->
        <button class="ql-bold"></button>
        <button class="ql-italic"></button>

        <!-- But you can also add your own -->
        <button id="custom-button"></button>
      </div>
    </template>
  </QuillEditor>
</template>

您也可以将工具栏放在QuillEditor组件之外，只需确保使用自定义工具栏id设置工具栏道具：

<template>
  <QuillEditor toolbar="#my-toolbar"></QuillEditor>
  <div id="my-toolbar">
    <!-- Add buttons as you would before -->
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
  </div>
</template>

模块

模块允许定制Quill的行为和功能。要启用模块，只需将其包含在模块 props 中即可。

示例：

在这个例子中，我将使用 quill-blot-formatter，这是一个用于调整图像和iframe视频大小和重新对齐的模块。

安装

npm install --save quill-blot-formatter
# OR
yarn add quill-blot-formatter

使用

<template>
  <QuillEditor :modules="modules" toolbar="full" />
</template>

<script>
import { ref, defineComponent } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import BlotFormatter from 'quill-blot-formatter'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

export default defineComponent({
  components: {
    QuillEditor,
  },
  setup: () => {
    const modules = {
      name: 'blotFormatter',  
      module: BlotFormatter, 
      options: {/* options */}
    }
    return { modules }
  },
})
</script>

示例使用 quill-image-uploader

在这个例子中，我将使用quill-image-uploader，这是quill富文本编辑器的一个模块，允许将图像上传到服务器，而不是进行base64编码。

安装

npm install quill-image-uploader --save

使用：

<template>
  <QuillEditor :modules="modules" toolbar="full" />
</template>

<script>
import { ref, defineComponent } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import ImageUploader from 'quill-image-uploader';
import axios from '../lib/axios';

export default defineComponent({
  components: {
    QuillEditor,
  },
  setup: () => {
    const modules = {
        name: 'imageUploader',
        module: ImageUploader,
        options: {
          upload: file => {
            return new Promise((resolve, reject) => {
              const formData = new FormData();
              formData.append("image", file);

              axios.post('/upload-image', formData)
              .then(res => {
                console.log(res)
                resolve(res.data.url);
              })
              .catch(err => {
                reject("Upload failed");
                console.error("Error:", err)
              })
            })
          }
    return { modules }
  }
})
</script>

更多模块详情

Quill Modules

quill-autoformat - 用于转换文本的模块，包括提及、链接和标签
quill-better-table - 表编辑模块，支持调整列大小、多行单元格、合并/取消合并单元格
quill-blot-formatter - 一个用于调整图像和iframe视频大小和重新对齐的模块
quill-cursors - Quill文本编辑器的多光标模块
quill-emoji - 表情符号的Quill模块工具栏扩展
quill-focus - 添加“焦点模式”的Quill.js模块
quill-form - 自动表单输入和提交绑定模块
quill-find-replace-module - Quill.js的一个模块，用于查找单词并替换它们
quill-html-edit-button - 一个添加按钮的模块，允许您在quill编辑器中查看/编辑原始HTML。
quill-image-compress - 一个在将图像添加到编辑器之前压缩图像的模块。
quill-image-drop-module - 一个允许将图像粘贴并拖放到编辑器中的模块
quill-image-resize-module - 一个允许调整图像大小的模块（不维护：改用quill-blot格式化器）
quill-image-uploader - 将图像上传到服务器，添加工具栏按钮并处理拖放/粘贴的图像
quill-image-url-drop-module -一个允许将图像的URL拖放到编辑器中的模块
quill-magic-url - 在键入/粘贴过程中检查URL，并自动将其转换为链接
quill-markdown-shortcuts - Quill.js模块，在键入时将markdown转换为富文本格式
quill-markdown-toolbar - Quill.js模块，用于将markdown文本转换为富文本格式
quill-mention - @Quill富文本编辑器的提及
quill-paste-smart - 仅粘贴支持的HTML
quill-placeholder-module - 用于添加占位符的quill模块
quill-placeholder-autocomplete-module - 将自动补全功能引入“quill占位符模块”
quill-rich-voice-editor - Quill.js模块，用于SSML标签和函数，以构建更好的语音应用程序
quill-table-ui - 表UI模块

Options

配置prosp

警告

仅在本地注册QuillEditor组件时使用选项道具

使用

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
  components: {
    QuillEditor
  },
  data() {
    return { 
      options: {
        debug: 'info',
        modules: {
          toolbar: ['bold', 'italic', 'underline']
        },
        placeholder: 'Compose an epic...',
        readOnly: true,
        theme: 'snow'
      }
    }
  },
}

<template>
  <QuillEditor :options="options" />
</template>

全局配置props

警告

仅在全局注册QuillEditor组件时使用globalOptions道具

import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'

const app = createApp()
// define your options
const globalOptions = {
  debug: 'info',
  modules: {
    toolbar: ['bold', 'italic', 'underline']
  },
  placeholder: 'Compose an epic...',
  readOnly: true,
  theme: 'snow'
}
// set default globalOptions prop
QuillEditor.props.globalOptions.default = () => globalOptions
// register QuillEditor component
app.component('QuillEditor', QuillEditor)

配置属性

bounds

默认 document.body

DOM元素或DOM元素的CSS选择器，编辑器的UI元素（即工具提示等）应限制在其中。目前，它只考虑左右边界。

debug

默认 warn

调试快捷方式。注意debug是一种静态方法，会影响页面上Quill编辑器的其他实例。默认情况下，仅启用警告和错误消息。

formats

默认 All formats

编辑器中允许的格式白名单。请参阅格式以获取完整列表。

modules

要包含的模块集合和相应选项。有关更多信息，请参阅模块。

placeholder

默认 None

占位符文本，用于在编辑器为空时显示。

readOnly

默认 fasle

是否将编辑器实例化为只读模式。

scrollingContainer

默认 null

DOM元素或DOM元素的CSS选择器，指定哪个容器有滚动条（即overflow-y:auto），if是用自定义CSS从默认的ql编辑器更改的。当Quill设置为自动增加其高度，并且另一个祖先容器负责滚动时，有必要修复滚动跳跃错误。

theme

要使用的主题的名称。内置选项是气泡或雪。无效或错误的值将加载默认的最小主题。请注意，主题的特定样式表仍然需要手动包含。有关更多信息，请参阅主题。

API

props

v-model:content

Type: Delta | String
Default: {}
Return: Delta

双向绑定编辑器内容，可以是Delta对象、纯文本或html字符串，有关更多详细信息，请参阅Quill Delta文档。

警告

您的内容和内容类型必须匹配，如果您想使用html作为内容，则必须将contentType设置为html和文本。

content

Type: Delta | String
Default: {}

编辑器的内容可以是Delta对象、纯文本或html字符串，有关更多详细信息，请参阅Quill Delta文档。

contentType

Type: "delta" | "html" | "text"
Default: delta

VueQuill支持三种内容类型delta、html和text，如果您想使用html或纯文本作为内容，请务必设置contentType。

提示

使用增量（默认值）内容类型来防止问题，这是最佳做法。

enable

Type: Boolean
Default: true

设置用户通过鼠标或键盘等输入设备进行编辑的能力。

readOnly

Type: Boolean
Default: false

如果为真，编辑器将不允许更改其内容。包裹被子禁用API。

placeholder

Type: String

属性指定了一个简短的提示，描述了输入字段的预期值（例如，样本值或预期格式的简短描述）。

theme

Type: "snow" | "bubble" | ""

Default: "snow"

该主题的名称适用于编辑器，Quill有两个官方支持的主题：雪和泡泡。传递“”以使用最小核心主题。有关包含所需样式表的更多信息，请参阅主题文档。

toolbar

Type: String | Array | Object

使用一系列格式名称配置默认工具栏图标的工具栏选项，有关更多详细信息，请参阅工具栏部分。

modules

Type: Object | Object[]

注册模块的选项，有关更多详细信息，请参阅模块部分。

options

Type: Object

配置Quill的选项，有关更多详细信息，请参阅文档选项

globalOptions

Type: Object

配置Quill的全局选项，有关更多详细信息，请参阅文档选项

警告

仅在全局注册QuillEditor组件时使用globalOptions

import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'

const app = createApp()
// define your options
const globalOptions = {
  debug: 'info',
  modules: {
    toolbar: 'minimal'
  },
  placeholder: 'Compose an epic...',
  readOnly: true,
  theme: 'snow'
}
// set default globalOptions prop
QuillEditor.props.globalOptions.default = () => globalOptions
// register QuillEditor component
app.component('QuillEditor', QuillEditor)

Event

@textChange

Arguments: { delta: Delta, oldContents: Delta, source: Sources }

文本更改时触发

@selectionChange

Arguments: { range: RangeStatic, oldRange: RangeStatic, source: Sources }

当选择更改时触发

@editorChange

Arguments:

{ name: 'text-change', delta: Delta, oldContents: Delta, source: Sources}

{ name: 'selection-change', range: RangeStatic, oldRange: RangeStatic, source: Sources }

当编辑器更改时触发，无论是文本更改还是选择更改

@update:content

Arguments: content: Delta

当编辑器内容更改时触发

@focus

Arguments: editor: Ref<Element>

当编辑器获得焦点时触发。

@blur

Arguments: editor: Ref<Element>

当编辑器失去焦点时触发。

@ready

Arguments: quill: Quill

Quill初始化后触发。

methods

警告

我们强烈建议在quill编辑器准备就绪时调用方法，使用@ready事件

getEditor()

Return: editor: Element

Returns the Editor Element.

getToolbar()

Return: toolbar: Element

Returns the Toolbar Element.

getQuill()

Return: quill: Quill

返回支持编辑器的Quill实例。虽然你可以自由地使用它来访问getText（）、focus（）等方法。

getContents(index, length)

Parameter: index?: number, length?: number
Return: content: string | Delta

返回编辑器的内容。

setContents(content, source)

Parameter: content: string | Delta, source: 'api' | 'user' | 'silent'

设置编辑器的内容。

getHTML()

Return: html: string

返回编辑器的完整HTML内容。

setHTML(html)

Parameter: html: string

设置编辑器的HTML内容。

pasteHTML(html, source)

Parameter: html: string, source: 'api' | 'user' | 'silent'

从非Quill环境导入原始HTML。

focus()

获取焦点

getText(index, length)

Parameter: index?: number, length?: number
Return: text: string

返回编辑器的全文内容。

setText(text)

Parameter: text: string, source: 'api' | 'user' | 'silent'

设置编辑器的文本内容。

Slots

使用#工具栏槽创建自己的自定义工具栏

示例

<template>
  <QuillEditor toolbar="#my-toolbar" ...>
    <template #toolbar>
      <div id="my-toolbar">
        <!-- Add buttons as you would before -->
        <button class="ql-bold"></button>
        <button class="ql-italic"></button>

        <!-- But you can also add your own -->
        <button id="custom-button"></button>
      </div>
    </template>
  </QuillEditor>
</template>

Export

QuillEditor：Quill编辑器组件。

Quill：Quill命名空间，您可以在其上调用register。

export { QuillEditor, Quill }

导入

// ES6
import { QuillEditor, Quill } from '@vueup/vue-quill';

// CommonJS
const { QuillEditor, Quill } = require('@vueup/vue-quill');

最新的 vue-quill 中文文档 赶快收藏吧

介绍

警告

VueQuill是什么

什么是Quill

浏览器支持

社区

安装

提示

CDN

npm/yarn

OR

使用

在浏览器中

基本用法：

在单个文件组件中

基本用法：

主题

工具栏

模块

在这个例子中，我将使用 quill-blot-formatter，这是一个用于调整图像和iframe视频大小和重新对齐的模块。

示例使用 quill-image-uploader

Quill Modules

Options

配置prosp

配置属性

bounds

debug

formats

modules

placeholder

readOnly

scrollingContainer

theme

API

props

v-model:content

content

contentType

enable

readOnly

placeholder

theme

toolbar

modules

options

globalOptions

Event

@textChange

@selectionChange

@editorChange

@update:content

@focus

@blur

@ready

Quill初始化后触发。

methods

getEditor()

getToolbar()

getQuill()

getContents(index, length)

setContents(content, source)

getHTML()

setHTML(html)

pasteHTML(html, source)

focus()

getText(index, length)

setText(text)

Slots

Export

最新的 vue-quill 中文文档赶快收藏吧