README

Yii 2 的 ContentTools 编辑器实现。

ContentTools

查看 ContentTools 网站了解更多关于编辑器的信息 http://getcontenttools.com。

安装

将包添加到 composer.json

{
    "require": {
        "bizley/contenttools": "dev-master"
    }
}

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

使用方法

1. 小部件。

用 <?php bizley\contenttools\ContentTools::begin(); ?> 和 <?php 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. 后端。

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

您必须创建一些控制器动作

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

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

UploadAction - 负责使用 bizley\contenttools\models\ImageForm 验证上传的图片（允许 jpg、png 和 gif 图片，最大宽度和高度为 1000px，最大大小为 2MB），图片保存在可以从网络访问的 '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(),
    ];
}

最后一个 "保存内容" 动作还没有准备好，所以请继续处理它。默认配置如下

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

选项

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

id

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

tag

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

dataName

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

dataInit

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

options

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

imagesEngine

默认

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

图片操作 URL 的数组 OR false 以关闭默认图片引擎（您将需要自己准备处理图片的 js）。

saveEngine

默认

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

包含内容保存动作 URL 的数组 OR 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 布尔标志或小部件翻译的语言代码。您可以在 'ContentTools/translations' 文件夹中查看已准备好的翻译列表。false 表示小部件不会翻译（默认语言为英语）。true 表示小部件将使用应用程序语言进行翻译。如果此参数为字符串，小部件将尝试加载具有给定名称的翻译文件。如果找不到且字符串长度超过2个字符，小部件将再次尝试，这次将参数缩短为2个字符。如果仍然找不到，语言将重置为默认值。

全局配置

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

操作回调函数

默认的js图片回调函数假设以下操作响应

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

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

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

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

保存内容

负责保存内容的操作应期望每个页面区域数据的数组，以成对的形式 'region-identifier' => 'region-content'。您可以设置区域的 'id' 为 ModelName[attributeName]，以便它可以以标准的 Yii 2 方式（即使用 load()）进行处理。

dkhru / contenttools

维护者

详情