README

基于Sir Trevor wysiwyg自定义组件的yii2优化内容构建器，使用Mustache、jQuery Cropper和其他技术。

安装

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

运行以下命令：

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

或

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

将以下内容添加到您的composer.json文件的require部分：

配置

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

...
 '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
    ],

####title

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

####type

传递给Sir Trevor的类型。未检查原因，但无空格的驼峰命名类型可以找到。

####image 任何要在添加菜单时显示的图片。如果没有添加图片，它将尽力从HTML标记中生成图片，但现在还不够好。

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

####template Mustache模板在JS或PHP上渲染。所以使用一个模板传递给编辑器和渲染。新块将自动渲染。#####data-st-part="data" *必需由插件处理。

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

#####data-role="editable-image" 使图片占位符并将其控制器放在其上方。您可以选择上传图片、裁剪它并通过前端替换它。######image 记录data src、宽度、高度、id。如果上传时图片有id，则发送旧id，如果您想替换图片。######data-max-width="1076" 在上传之前，如果图片宽度大于该像素宽度，则将其减小。全局设置为1200px

图片可以与其他可编辑子块数据结合，用于SEO目的的alt和title属性。

当前情况？

由于我没有找到合并它们的时间，因此依赖项太多。目前可能只能用于管理面板，但您也可以将其提供给已登录的用户。您可以更改类以适应任何其他框架。