README

为 Yii 2 实现的内容工具编辑器。

内容工具

更多信息，请访问内容工具网站 http://getcontenttools.com 。

安装

将包添加到您的 composer.json 文件中

{
    "require": {
        "bizley/contenttools": "^1.4"
    }
}

然后运行 composer update，或者也可以运行 composer require bizley/contenttools

Bower 资产

此包依赖于通过 https://asset-packagist.org/ 获取的 Bower 包。
请确保您可以通过正确配置 composer.json 来获取它（请参阅链接上面的说明）。

使用

1. 小部件。

在 \bizley\contenttools\ContentTools::begin(); 和 \bizley\contenttools\ContentTools::end(); 中包装内容的任何部分。

<?php \bizley\contenttools\ContentTools::begin(); ?>
This is the part of view that is editable.
<p>There are paragraphs</p>
<div>and more...</div>
<?php \bizley\contenttools\ContentTools::end(); ?>

您可以在一页上多次使用小部件。

2. 后端。

Yii 2 ContentTools 异步保存内容和上传的图片，并在后端需要一些准备。

您必须创建几个控制器的操作

"上传新图片" 操作,
"旋转上传的图片" 操作,
"插入并裁剪上传的图片" 操作,
"保存内容" 操作。

如果不需要特殊操作，前三个操作已经准备好了。您可以在 'actions' 文件夹中找到它们。

UploadAction - 使用 \bizley\contenttools\models\ImageForm 验证上传的图片（允许 jpg、png 和 gif 图片，最大宽度和高度为 1000px，最大大小为 2 MB），图片保存在可通过网络访问的 content-tools-uploads 文件夹中。
RotateAction - 使用 Imagine 库（通过在 composer.json 中要求的 yii2-imagine 扩展）旋转上传的图片。
InsertAction - 使用 Imagine 库将图片插入到内容中，可选的裁剪。

默认的图片 URL 选项是

'imagesEngine' => [
    'upload' => '/site/content-tools-image-upload',
    'rotate' => '/site/content-tools-image-rotate',
    'insert' => '/site/content-tools-image-insert',
],

因此，如果您不想更改 imagesEngine 参数，请在 SiteController 中添加以下内容

public function actions()
{
    return [
        'content-tools-image-upload' => \bizley\contenttools\actions\UploadAction::className(),
        'content-tools-image-insert' => \bizley\contenttools\actions\InsertAction::className(),
        'content-tools-image-rotate' => \bizley\contenttools\actions\RotateAction::className(),
    ];
}

有关添加操作的更多信息，请参阅 Yii 2 指南中的独立操作部分。

最后的 "保存内容" 操作尚未准备，因为它取决于您应用程序的业务逻辑。请参阅此文件末尾的 保存内容 部分。

此操作的默认配置是

'saveEngine' => [
    'save' => '/site/save-content',
],

选项

您可以通过在 begin() 方法中传递配置数组来为小部件添加选项。

id

默认: null
可编辑区域的标识符（必须是唯一的）。如果为空，则自动设置为 'contentToolsXXX'，其中 XXX 是下一个小部件的编号。

page

默认: null
页面标识符。如果为 null，则设置为当前 URL。

tag

默认: 'div'
用于包装可编辑内容的 HTML 标签。

dataName

默认: 'name'
存储可编辑区域标识符的 data-* 属性的名称。

dataInit

默认: 'editable'
标记区域为可编辑的 data-* 属性的名称。

options

默认: []
应用于可编辑区域标签的 HTML 选项数组。

imagesEngine

default

[
    'upload' => '/site/content-tools-image-upload',
    'rotate' => '/site/content-tools-image-rotate',
    'insert' => '/site/content-tools-image-insert',
]

图像操作URL数组或者 false 以关闭默认图像引擎（您需要自行准备处理图像的JS）。

saveEngine

default

[
    'save' => '/site/save-content',
]

包含保存内容操作URL的数组或者 false 以关闭默认保存引擎（您需要自行准备处理内容保存的JS）。

styles

默认: []
可以应用于编辑内容的样式数组。
每个样式应单独添加到数组中，例如

'Name of the style' => [
    'class' => 'Name of the CSS class',
    'tags'  => [Array of the html tags this can be applied to] or 'comma-separated list of the html tags this can be applied to'
],

示例

'Bootstrap Green' => [
    'class' => 'text-success',
    'tags'  => ['p', 'h2', 'h1']
],

tags 键是可选的，如果省略，样式可以应用于每个元素。

language

默认： false
用于小部件翻译的布尔标志或语言代码。
您可以在 @bower/contenttools/translations 文件夹中找到已准备的翻译列表。
false 表示小部件不会翻译（默认语言为英语）。
true 表示小部件将使用应用程序语言进行翻译。
如果此参数是字符串，则小部件尝试加载具有给定名称的翻译文件。
如果找不到且字符串长度超过2个字符，则小部件再次尝试，这次参数缩短到2个字符。
如果仍然找不到，则语言将重置为默认值。

globalConfig

默认： true
布尔标志，表示配置是否全局。
全局配置意味着每个后续小部件都将忽略 page、tag、dataName、dataInit、imagesEngine、saveEngine 和 language 参数，并将它们设置为第一个小部件中的相同值。此外，只有当样式具有唯一名称时，才会添加 styles。

customJs

默认: null
与编辑器一起初始化的自定义JS字符串。
使用 editor 变量指向 ContentTools.EditorApp.get() 的实例。
有关CT API的更多详细信息，请参阅 http://getcontenttools.com/api/content-tools。

操作回调

默认JS图像回调假定以下操作响应

{
    'size': [image-width-in-px, image-height-in-px],
    'url': image-url
}

对于插入操作是可选的 'alt'。在发生任何错误的情况下，响应应该是

{
    'errors': [array-of-error-descriptions]
}

目前错误仅在浏览器控制台中显示（用户只能看到一个大的透明十字）。

保存内容

负责保存内容的操作应期望以每页区域数据的数组形式接收，配对为 'region-identifier' => 'region-content'。

典型的结构可能如下所示

[
    'contentTools0' => '...', // HTML content of the contentTools0 region
    'contentTools1' => '...', // HTML content of the contentTools1 region
    '_csrf' => '...', // CRSF token value
    'page' => '/site/index' // page identifier
]

现在您只需要验证并保存与给定标识符的页面相关联的区域。

保存内容的示例实现可以在 https://github.com/bizley/yii2-content-tools/blob/master/example.php 中找到

bizley / contenttools

维护者

详细信息