alex290 / yii2-bootstrap-editor
Bootstrap 4 编辑器文本区域
dev-master
2020-02-05 19:11 UTC
Requires
- yiisoft/yii2: ~2.0.0
This package is auto-updated.
Last update: 2024-09-06 04:57:21 UTC
README
Bootstrap 4 编辑器文本区域
安装
安装此扩展的首选方式是通过 composer。
运行以下命令之一
php composer.phar require --prefer-dist alex290/yii2-bootstrap-editor "*"
或者
"alex290/yii2-bootstrap-editor": "*"
将以下内容添加到您的 composer.json
文件的 require 部分中。
连接
在配置文件夹 config
下的 web.php
文件中插入参数
使用
'modules' => [ 'bs4-editor' => [ 'class' => 'alex290\bootstrapEditor\Module', ], ],
使用
一旦安装了此扩展,只需在代码中通过
<?php use alex290\bootstrapEditor\BootstrapEdit; ?> <?= BootstrapEdit::widget(['content' => $content ]) ?>
带有 inputContent
类的输入框 - 加载 Html - Bootstrap 4 布局
<textarea id="Content" class="form-control" class="inputContent""></textarea>
附加参数
自定义按钮
'costumButton' => [ [ 'name' => 'Название кнопки', 'html' => 'HTML код', 'scrypt' => 'Скрипт активации например слайдер', // Необязательный параметр 'style' => 'Стили для конкретного виджета', // Необязательный параметр ], ... ]
<?php use alex290\bootstrapEditor\BootstrapEdit; ?> <?= BootstrapEdit::widget(['content' => $content, 'costumButton' => $costumButton ]) ?>
自定义样式和脚本
'costumCssScrypt' = [ 'css' => [ "/web/css/slick.css", ], 'js' => [ "/web/js/slick.min.js", ] ];
<?php use alex290\bootstrapEditor\BootstrapEdit; ?> <?= BootstrapEdit::widget(['content' => $content, 'costumCssScrypt' => $costumCssScrypt]) ?>
CKEDITOR 编辑器
'ckeditor' => [ 'path' => '/web/lib/ckeditor/ckeditor.js', 'customConfig': '/web/lib/ckeditor/ckeditor_config.js', // Своя конфигурация - Необязательный параметр ],
附加脚本和样式
可以通过表单字段添加额外的样式和脚本
带有 inputScrypt
类的输入框 - 加载 JavaScrypt
<textarea id="Scrypt" class="form-control" class="inputScrypt""></textarea>
带有 inputStyle
类的输入框 - 加载 CSS 样式
<textarea id="Style" class="form-control" class="inputStyle""></textarea>
保存时返回数据
带有 onclickReturnContent
类的按钮 - 返回所有字段更新的数据(布局、样式和脚本);
<button type="submit" class="btn btn-success onclickReturnContent">Сохранить</button>
CSS 样式解析器
该模块具有解析 CSS 样式的功能,将其转换为数组以供元素操作使用
$classNew = CssParser::getJson($css);
结果,我们得到一个包含样式的 JSON 数组