README

Quill 是一个现代化的 WYSIWYG 编辑器，这里是它的 Yii 2 实现。

Quill

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

• 文档
• 指南
• 沙箱
• GitHub

yii2-quill

安装

运行控制台命令

composer require jcabanillas/quill:^3.3

或将包添加到您的 composer.json

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

然后运行 composer update。

NPM 资产

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

用法

用作活动字段扩展

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

或作为独立的小部件

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

基本参数

• theme string 默认 'snow'
'snow' （Quill::THEME_SNOW）为 Quill 的 snow 主题，
  'bubble' （Quill::THEME_BUBBLE）为 Quill 的 bubble 主题，
  false 或 null 用于移除主题（在没有主题的情况下，您可能需要提供自己的工具栏）。
  请参阅 Quill 的主题文档。

• toolbarOptions boolean|string|array 默认 true
true 用于主题的默认工具栏，
  'FULL' （Quill::TOOLBAR_FULL）用于完整的 Quill 工具栏，
  'BASIC' （Quill::TOOLBAR_BASIC）用于一些基本工具栏选项，
  array 用于工具栏配置（见下文）。

工具栏

从 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'来添加额外的JavaScript代码。
例如，要禁用用户输入，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包管理器提供本地资源。对于早期版本，您必须通过自定义JavaScript（参见js属性）添加它。
运行

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

或将包添加到您的 composer.json

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

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