README

将 SirTrevor JS 库集成到 Symfony2 组件包中。

SirTrevor 编辑器与 "块"（不同类型内容片段）协同工作。此组件包允许您将这些映射到 Doctrine 实体。其次，它提供了 Twig 扩展和模板，以便轻松实现干净的 SirTrevor 集成。

安装

使用打包，需要 edsi-tech/sir-trevor-bundle，然后在 app/AppKernel.php 中注册它。

使用

模型

您必须扩展 EdsiTech\SirTrevorBundle\Entity\AbstractBlock。 AbstractBlock 表示 SirTrevor 所了解的块。它可以轻松映射到 Doctrine ORM 实体，为此已经添加了一些注解。

渲染编辑器

要在 Twig 模板中渲染编辑器，请放入

{{ cms_render(blocks) }}

您必须传递给此模板一个包含 AbstractBlock 集合的 blocks 变量。此外，使用 is_editable 变量，您可以决定是否渲染可由 SirTrevor 编辑的内容，或者仅渲染块作为纯 HTML。

默认情况下，我们使用主题 EdsiTechSirTrevorBundle:Render:_blocks_theme.html.twig。
您可以通过组件包配置来更改它。

# app/config/config.yml
edsi_tech_sir_trevor:
    edsi_tech_sir_trevor: 'EdsiTechSirTrevorBundle:Render:_blocks_theme.html.twig'

保存块

块将通过 POST 重新发送到您的控制器。要处理这些块，您应使用提供的 edsi_tech_sir_trevor.handler.block_handler 服务。它将读取请求并返回一个包含 EdsiTech\SirTrevorBundle\Model\EditedBlock 的数组。

附加功能

加载栏

它包括一个用于编辑器加载的进度条。使用 Pace 可用。

Flash 消息

请求 Flash 消息作为由 HubSport Messenger 提供的漂亮消息显示。

控制器示例

    public function renderAction()
    {
        $this->get('session')->getFlashBag()->add('success', 'Green success message');
        $this->get('session')->getFlashBag()->add('danger', 'Red danger message');
        $this->get('session')->getFlashBag()->add('info', 'Blue information message');

        return $this->render('myTwigTemplate', [
            'blocks'        => [] // an array of AbstractBlocks
            'is_editable'   => true
        ]);
    }

"返回" 按钮

此组件包添加的顶部栏可以包括 "返回" 按钮。只需在控制器中提供它应该指向的 URL 即可

    public function renderAction()
    {
        return $this->render('myTwigTemplate', [
            'back_link'     => '/',
            'blocks'        => [] // an array of AbstractBlocks
            'is_editable'   => true
        ]);
    }

完整工作示例

控制器

    public function renderAction()
    {
        if ($request->isMethod('post')) {
            $data = $this->get('my_city_rendering.handler.block_handler')->handle($request);

            // do what you want!

            $this->get('session')->getFlashBag()->add('success', 'Content saved!');
        }
            
        return $this->render('myTwigTemplate', [
            'back_link'     => '/',
            'blocks'        => [] // an array of AbstractBlocks
            'is_editable'   => true,
            'save_bar_buttons` => '<a href="http://madebymany.github.io/sir-trevor-js/docs.html">Sir Trevor doc</a>',
        ]);
    }

模板

<html>
    <head>
        <title>SirTrevor example</title>
    </head>
    <body>
        <div>Some content that won't be editable by SirTrevor</div>
        <div>{{ cms_render(blocks) }}</div>
    </body>
</html>

配置

允许的块

默认情况下，并非所有 SirTrevor 块都启用，您可以在组件包配置中修改它

# app/config/config.yml
edsi_tech_sir_trevor:
    allowed_blocks:
        # below are blocks enabled by default
        # you can remove one of course!
        - Heading
        - Text
        - List
        - Quote
        # and I also want to add SirTrevor Image & Video blocks (watch out file upload are not handled at the moment)
        - Image
        - Video
        - Tweet

主题

当内容渲染时，我们使用 blocks_theme 来确定每个块的 HTML（与 Symfony2 表单主题非常类似）。已包含默认实现；如果需要自定义它，可以在配置中设置自己的 Twig 模板。

所有块都在您也可以覆盖的 render_template 中渲染。

# app/config/config.yml
edsi_tech_sir_trevor:
    blocks_theme: EdsiTechSirTrevorBundle:Render:_blocks_theme.html.twig
    render_template: EdsiTechSirTrevorBundle:Render:base.html.twig

添加额外的 CSS 或 JS 文件

您可以在包含的 JS 库之后但编辑器初始化之前注入另一个 JS 文件。常见用例是添加一些 SirTrevor 块。

以相同的方式，您还可以添加一个 CSS 文件，它将在所有我们的样式表之后包含。

# app/config/config.yml
edsi_tech_sir_trevor:
    allowed_blocks:
        - Text
        - Heading
        - Custom # tip: do not forget to enable your custom block!
    extra_js_file: 'bundles/acmedemo/js/custom-block.js'
    extra_css_file: 'bundles/acmedemo/css/style.css'

进一步了解

获取编辑器实例

您可以通过在 JS 中执行 SirTrevor.getInstance() 来检索 SirTrevor 实例。

edsi-tech / sir-trevor-bundle

维护者

详细信息