README

Quill是现代所见即所得编辑器在Yii 2中的实现。

Quill

yii2-quill

安装

将包添加到您的 composer.json

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

并运行 composer update，或者运行 composer require bizley/quill:^2.3

使用方法

作为活动字段扩展使用

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

或作为独立小部件使用

<?= \bizley\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'参数来更改）并且编辑的内容被复制到隐藏的输入字段，以便在表单中使用。

编辑框的高度

默认编辑器高度为150px（这可以通过设置'options'参数来更改）并且其框随着新文本行的添加而扩展。

Quill源

Quill的JS代码由CDN提供。您可以通过更改'quillVersion'参数来更改当前yii2-quill发布中设置的Quill版本，但在此情况下某些选项可能无法正常工作。

附加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
]

您可以通过设置'katexVersion'参数来更改KaTeX的版本。

语法高亮模块

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

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

您可以通过设置'highlightVersion'参数来更改highlight.js的版本。
您可以通过设置'highlightStyle'参数来更改默认的highlight.js样式表。请参阅可能的样式列表（所有以.min.css结尾的文件）。

jakabj16 / quill

维护者

详细信息