README

Quill的现代WYSIWYG编辑器的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 提供了以下 JS

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]。