alex290/yii2-bootstrap-editor

Bootstrap 4 编辑器文本区域

安装: 55

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

类型:yii2-extension

dev-master 2020-02-05 19:11 UTC

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 数组