README

Quill的现代所见即所得编辑器在Yii 2中的实现。从https://github.com/bizley/yii2-quill克隆并改进而来。

Quill

yii2-quill

安装

安装此扩展的最简单方法是通过Composer。
在您的 composer.json 中添加以下内容：
"esquire900/quill": "^2.0"
或者运行控制台命令：
php composer.phar require "esquire900/quill ^2.0"

如果您想安装Quill测试版，请添加以下内容：
"esquire900/quill": "^1.0"

使用方法

将其用作活动字段扩展
<?= $form->field($model, $attribute)->widget(\esquire900\quill\Quill::className(), []) ?>

或者作为独立的小部件
<?= \esquire900\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' => []]]],
],

以前yii2-quill版本的（^1.0与Quill beta）的工具栏配置已弃用。

附加信息

容器和表单的输入

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结尾的文件）。

esquire900 / quill

维护者

详情