README

Symfony2扩展包，为sonata admin添加一个页面和模态弹出窗口，允许您上传、裁剪和浏览图像

工作原理

• 安装扩展包
• 添加扩展包路由并重定向sonata使用扩展包的模板
• 创建一个服务来处理上传的图像数据，并返回预览图像的URL
• 菜单中出现图像面板选项
• 您可以在面板中上传、浏览、删除和裁剪图像
• 您还可以上传外部图像的URL
• 您可以在编辑页面上的任何文本框旁边添加按钮，打开面板并返回选中图像的URL到文本框
• 此扩展包还包括CKEditor标准版，配置为使用图像面板来浏览图像

安装

首先需要扩展包

composer require teaocha/sonata-admin-image-panel

将其添加到您的内核

class AppKernel extends Kernel
{
  public function registerBundles()
  {
    $bundles = array(
      new Teaocha\SonataAdminImagePanelBundle\TeaochaSonataAdminImagePanelBundle(),
    );
  }
}

安装资产

php app/console assets:install web

添加路由

teaocha_image_panel:
  resource: '@TeaochaSonataAdminImagePanelBundle/Resources/config/routing.yml'

告诉sonata使用扩展包的布局

sonata_admin:
  templates:
    layout:  "@TeaochaSonataAdminImagePanelBundle/Resources/views/admin_layout.html.twig"

创建请求处理器

考虑到您可能有多种存储或处理图像的方式，我认为最好将图像处理留给您，因此为了使扩展包正常工作，您必须创建一个处理请求的服务。

以下是它应该的样子

use Teaocha\SonataAdminImagePanelBundle\Request\RequestHandlerInterface;
use Teaocha\SonataAdminImagePanelBundle\Request\RequestResult;

class ImagePanelRequestHandler implements RequestHandlerInterface
{
  public function imageUpload($imageData, $contentType){

    //Do something with the image data

    $requestResult = new RequestResult()
    $requestResult->setPreviewUrl($url);
    $requestResult->setId($id);		
    return $requestResult;		
  }

  public function imageUrlUpload($imageUrl){

    //Do something with the url

    $requestResult = new RequestResult()
    $requestResult->setPreviewUrl($url);
    $requestResult->setId($id);		
    return $requestResult;	
  }

  public function deleteImage($id){
    //Delete the image
  }

  public function listImages(){

    //Generate an array of RequestResult objects

    return $results;
  }
}

您的服务应实现RequestHandler接口

然后有四个函数供您填写

imageUpload接收一个编码为base64的数据字符串（不包括'data:image/*;base64,')，和一个内容类型（例如'image/jpeg')，您应按自己的方式处理并返回一个RequestResult对象（见下文）

imageUrlUpload接收一个外部图像的URL。再次，您可以根据自己的意愿处理它，并返回一个RequestResult对象。

deleteImage接收一个id，该id应指向上传的图像的记录。您不需要返回任何内容。

listImages用于填充图像面板。它应返回一个包含RequestResult对象的数组

RequestResult是一个简单的对象，需要设置两个字段

• setPreviewUrl()
• setId()

“预览URL”是将在面板中显示图像的URL，而“id”应是一个指向上述图像的数字id

完成这些后，添加服务并用teaocha.image_panel.request_handler进行标记

app.image_panel_request_handler:
  class: AppBundle\Services\ImagePanelRequestHandler
  tags:
    - { name: teaocha.image_panel.request_handler }

向文本字段添加按钮

您可以为管理员界面中的任何类似这样的文本输入添加按钮

通过将具有类名teaocha-image-panel-url-btn的按钮添加到管理员字段的帮助选项中来实现此操作

protected function configureFormFields(FormMapper $formMapper)
{
  parent::configureFormFields($formMapper);

  $imagePanelButton = '<button class="teaocha-image-panel-url-btn btn btn-danger">Open image panel...</button>';

  $formMapper
  ->with('New product')
    ->add('title', 'text')
  	->add('content', 'textarea', array('attr' => array('class' => 'ckeditor')))
  	->add('productImageUrl', 'text', array('help' => $imagePanelButton))
  ->end();
}

与CKEditor一起使用扩展包

扩展包的资产中包含了CKEditor标准版。编辑器已配置为使用图像面板来浏览图像。当您在CKEditor仪表板上单击图像图标时，将在URL输入旁边出现一个按钮，上面写着“浏览服务器”；单击该按钮将打开面板。

扩展包的管理员仪表板布局包括使用编辑器所需的脚本标签，因此要将其添加到编辑表单中，您只需将'ckeditor'类添加到表单的textarea中（见示例上方）。

如果您已经在使用 CKEditor 并且不想覆盖当前设置，您需要编辑我的布局文件，并删除包含 ckeditor 的行。然后，要使用图像面板，进入编辑器的 config.js 文件并添加以下行：

config.filebrowserBrowseUrl = "/admin/images/ckeditor"

致谢

额外致谢归功于 Cropper，因为我就是用这个工具进行图像裁剪的。

注意

目前该面板仅上传 jpeg 格式的数据字符串。