README

Quill 的 Yii 2 实现，现代所见即所得编辑器。

Quill

您可以在 https://quilljs.com/ 找到 Quill。

• 文档
• 指南
• 沙盒
• GitHub

yii2-quill

安装

运行控制台命令

composer require bizley/quill:^3.3

或者将包添加到您的 composer.json

{
    "require": {
        "bizley/quill": "^3.3"
    }
}

然后运行 composer update。

NPM 资产

此包可能依赖于一些 NPM 包。请确保您可以通过正确配置 composer.json 来获取它们（例如，使用 https://asset-packagist.org/ - 看那里说明）。

使用方法

作为活动字段扩展使用

<?= $form->field($model, $attribute)->widget(\bizley\quill\Quill::class, []) ?>

或作为独立的小部件

<?= \bizley\quill\Quill::widget(['name' => 'editor', 'value' => '']) ?>

基本参数

• theme 字符串 默认 'snow'
'snow' (Quill::THEME_SNOW) 为 Quill 的 snow 主题，
  'bubble' (Quill::THEME_BUBBLE) 为 Quill 的 bubble 主题，
  false 或 null 用于移除主题（如果没有主题，您可能需要提供自己的工具栏）。
  有关主题的详细信息，请参阅 Quill 文档。

• toolbarOptions 布尔值|字符串|数组 默认 true
true 为主题的默认工具栏，
  'FULL' (Quill::TOOLBAR_FULL) 为完整的 Quill 工具栏，
  'BASIC' (Quill::TOOLBAR_BASIC) 为少量基本工具栏选项，
  数组 用于工具栏配置（见下文）。

工具栏

从 1.0 版本开始，Quill 可以通过自定义按钮集轻松配置工具栏。
有关详细信息，请参阅 工具栏模块 文档。

您可以将 PHP 数组传递给 'toolbarOptions' 参数来配置此模块（它将被 JSON 编码）。

例如，要获取

new Quill('#editor', {
    modules: {
        toolbar: [['bold', 'italic', 'underline'], [{'color': []}]]
    }
});

在组件配置中添加以下代码

[
    'toolbarOptions' => [['bold', 'italic', 'underline'], [['color' => []]]],
],

附加信息

容器和表单的输入

Quill 编辑器在 div 容器中渲染（可以通过设置 'tag' 参数来更改），编辑的内容复制到隐藏的输入字段中，以便在表单中使用。您可以通过设置 'options' 参数来修改容器的 HTML 属性，通过设置 'hiddenOptions' 参数来修改隐藏字段的 HTML 属性。

编辑器框的高度

当 allowResize 选项设置为 false（默认值）时，编辑器的高度为 150px（可以通过设置 'options' 参数来更改）。将 allowResize 设置为 true 会重置最小高度，并允许其自由扩展。编辑器框会随着新文本行的添加而扩展。

Quill 源代码

默认情况下，Quill 通过 CDN（https://cdn.quilljs.com）提供。您可以通过更改 'quillVersion' 参数来更改当前 yii2-quill 发布版中设置的 Quill 版本，但在此情况下某些选项可能无法正常工作。从 3.0.0 版本开始，您可以使用通过 NPM 包管理器提供的本地资产来为 Quill 提供本地资产 - 要这样做，请运行

composer require npm-asset/quill:^1.3

或者将包添加到您的 composer.json

{
    "require": {
        "npm-asset/quill": "^1.3"
    }
}

您还需要在 Quill 的配置中设置 ['localAssets' => true]。

附加 JavaScript 代码

您可以使用 'js' 参数来附加额外的 JS 代码。
例如，要禁用用户输入，Quill的API提供了以下JavaScript代码：

quill.enable(false);

要通过小部件的配置获得相同效果，请添加以下代码：

[
    'js' => '{quill}.enable(false);',
],

{quill}占位符将被自动替换为编辑器的对象变量名。
有关Quill的API的更多详细信息，请访问https://quilljs.com/docs/api/

公式模块

Quill可以使用KaTeX库渲染数学公式。
要添加此选项，请使用公式模块配置小部件。

[
    'modules' => [
        'formula' => true, // Include formula module
    ],
    'toolbarOptions' => [['formula']], // Include button in toolbar
]

默认情况下，KaTeX通过CDN（https://cdn.jsdelivr.net.cn）提供。您可以通过设置'katexVersion'参数来更改KaTeX的版本。从版本3.0.0开始，您可以使用通过NPM包管理器提供的本地资源来提供KaTeX - 要这样做，请运行：

composer require npm-asset/katex:^0.15

或者将包添加到您的 composer.json

{
    "require": {
        "npm-asset/katex": "^0.15"
    }
}

您还需要在 Quill 的配置中设置 ['localAssets' => true]。

语法高亮模块

Quill可以使用highlight.js库自动检测并应用语法高亮。要添加此选项，请使用语法高亮模块配置小部件。

[
    'modules' => [
        'syntax' => true, // Include syntax module
    ],
    'toolbarOptions' => [['code-block']] // Include button in toolbar
]

默认情况下，highlight.js通过CDN（https://cdn.jsdelivr.net.cn）提供。您可以通过设置'highlightVersion'参数来更改highlight.js的版本。从版本3.0.0开始，您可以使用通过NPM包管理器提供的本地资源来提供highlight.js - 要这样做，请运行：

composer require npm-asset/highlight.js:^11.4

或者将包添加到您的 composer.json

{
    "require": {
        "npm-asset/highlight.js": "^11.4"
    }
}

您还需要在 Quill 的配置中设置 ['localAssets' => true]。

您可以通过设置'highlightStyle'参数来更改默认的highlight.js样式表（适用于CDN和本地版本）。请参阅可能的样式列表。

智能换行模块

您可以通过使用quill-smart-break插件添加智能换行（支持shift + enter）。

[
    'modules' => [
        'smart-breaker' => true,
    ],
]

从版本3.1.0开始，quill-smart-break通过NPM包管理器以本地资源形式提供。对于旧版本，您需要通过自定义JS（请参阅js属性）添加它。
运行

composer require npm-asset/quill-smart-break:^0.2

或者将包添加到您的 composer.json

{
    "require": {
        "npm-asset/quill-smart-break": "^0.2"
    }
}

您还需要在 Quill 的配置中设置 ['localAssets' => true]。