README

基于 Sir Trevor wysiwyg 自定义组件和 Mustache、jQuery Cropper 等的优化版 Yii2 内容构建器。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令

php composer.phar require --prefer-dist udokmeci/yii2-kont-trevor "*"

或者在您的 composer.json 文件的 require 部分添加以下内容

"udokmeci/yii2-kont-trevor": "*"

配置

扩展安装后，只需在代码中通过以下方式使用它

表单

...
 'components'=>[
 ...
        'kontTrevor' => [
            'class' => 'udokmeci\yii2kt\KontTrevor',
            'on init'=> function($e){
                $e->sender->addProviders(require_once Yii::getAlias('@vendor/udokmeci//yii2-kont-trevor/src/udokmeci/yii2kt/config/base-blocks.php'));
            }
        ],
    ...

编辑器依赖于 perminder-klair/yii2-sir-trevor-js，但是您可以添加自定义块。同时注册 CustomSirTrevorAsset 以查看。

渲染

<?php \udokmeci\yii2kt\assets\CustomSirTrevorAsset::register($this); ?>
<?= $form->field($model, 'body')->widget(\kato\sirtrevorjs\SirTrevor::classname(),[
        'debug'=>true,
        'imageUploadUrl'=>Url::to(['/site/st-upload']),
        'blockTypes' => [ 'Imagetop','Redactor', "Headex", 'Imageleft', 'Twocolumns', 'Threecolumns','Imageright','Textblock','Hr'],
  ]); ?>

渲染主要依赖于 mustache.php 的相同模板，来自块的模板将被使用，但是创建其他块也是可能的。待办事项：块接口

块模板化

$convertor = new \udokmeci\yii2kt\Parser();
echo $convertor->toHtml($this->body);

在 base-blocks.php 中定义了模板，例如 Imagetop

####标题

   [
        'title'=>"Image On Top",
        'type'=>"Imagetop",
        'image'=>'/img/sir-trevor/imageLeft.png',
        'templateObject'=>[
            'img_1'=>[
                'url'=>'https://s3-eu-west-1.amazonaws.com/yukumvar/upload/0aNk9D.',
            ],
            'h2_1'=>'Title Goes Here',
            'subtext_1'=>'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        ],
        'template'=><<<MST
<div class="row">
  <div class="col-md-12">
    <h2 class="st-required header1" data-st-part="data" data-role="editable-subblock" data-key="h2_1" >{{h2_1}}</h2>
  </div>
  <div class="col-md-12">
    <img class="img-responsive center-block" src="{{img_1.url}}"  alt="{{h2_1}}" title="{{h2_1}}" data-width="{{img_1.width}}" data-height='{{img_1.height}}' width="{{img_1.width}}" height='{{img_1.height}}'data-id="{{img_1.id}}" data-st-part="data" data-role="editable-image" data-max-width="1076" data-key="img_1"/>
  </div>
  <div class="col-md-12">
    <p class="st-required" data-st-part="data" data-role="editable-subblock"  data-key="subtext_1" >{{{subtext_1}}}</p>
  </div>
</div>
MST
    ],

在添加菜单时需要写入的内容。

####类型

传递给 sir-trevor 的类型。没有检查原因，但是非空格的类型可以找到。

####图片

在添加菜单时显示的图片。如果没有添加图片，它将尝试从 HTML 标记中生成图片，但现在效果不佳。

####模板对象

用于在添加的块上作为占位符的虚拟数据。

####模板

在 JS 或 PHP 上渲染的 Mustache 模板。因此，一个模板用于传递给编辑器并在渲染时使用。新块将自动渲染。

#####data-st-part="data" *必需，由插件处理。

#####data-role="editable-subblock" 作为文本持有者工作。在 h* 标签上仅粘贴文本内容。在其他块上清除格式并仅保留粗体和斜体。在粘贴时附加 HTML。

#####data-role="editable-image" 使图片占位符并将控制器放置在其上方。您可以选择上传图片、裁剪它并在前端替换它。######image