ZF2 表单中的按钮内容答案

【问题标题】：Button content in ZF2 formsZF2 表单中的按钮内容
【发布时间】：2014-02-14 10:32:31
【问题描述】：

如何编辑 Button 元素（ZF2 表单）的按钮内容？我可以设置标签，但我想在其中插入一些 html 代码。

    $this->add(array(
        'type' => 'Button',
        'name' => 'submit',
        'options' => array(
            'label'   => 'Modifica',
        ),
        'attributes' => array(
            'type'  => 'submit',
            'class' => 'btn btn-warning'
        )
    ));

谢谢

【问题讨论】：

你必须手动渲染一个带有 html 内容的按钮。如果我没有完全弄错的话，Zend\Form 不可能有 html 内容，因为出于安全原因，它都会在内部被转义。

标签： zend-framework2 zend-form zend-form-element

【解决方案1】：

您可以简单地使用 disable_html_escape 标签的选项。它对我有用。

$this->add(array(
        'type' => 'Button',
        'name' => 'submit',
        'options' => array(
            'label' => '<i class="icon icon-foo"></i> Submit',
            'label_options' => array(
                'disable_html_escape' => true,
            )
        ),
        'attributes' => array(
            'type'  => 'submit',
            'class' => 'btn btn-success'
         )
    ));

【讨论】：

【解决方案2】：

FormButton 视图助手将自动转义按钮 HTML 内容，正如 @Sam 正确提到的那样。

避免这种情况的唯一方法是使用自定义表单按钮视图助手。而不是删除转义功能（因为按钮文本内容仍应被转义）；您可以扩展视图助手并添加一个附加选项以允许您呈现 html（我假设这是一个引导图标）。

例如

use Zend\Form\View\Helper\FormButton as ZendFormButton;

class FormButton extends ZendFormButton
{

    public function render(ElementInterface $element, $buttonContent = null)
    {
        $content = (isset($buttonContent)) ? $buttonContent : $element->getLabel();
        $icon    = isset($element->getOption('icon')) ? $element->getOption('icon') : '';

        $escape = $this->getEscapeHtmlHelper();

        return $this->openTag($element) . $icon . $escape($content) . $this->closeTag();
    }

}

然后在服务管理器中使用按钮视图助手的默认注册名称（'form_button'）创建一个“可调用”配置条目。这会那么意味着我们的视图助手将被使用而不是默认的Zend\Form\View\Helper\FormButton。

// Module.php
public function getViewHelperConfig()
{
    return array(
        'invokables' => array(
            'form_button' => 'MyModule\Form\View\Helper\FormButton',
        )
    );
}

最后，更改按钮元素规范以添加新的“图标”选项

$this->add(array(
    'type' => 'Button',
    'name' => 'submit',
    'options' => array(
        'label'   => 'Modifica',
        'icon'    => '<i class="icon icon-foo">',
    ),
    'attributes' => array(
        'type'  => 'submit',
        'class' => 'btn btn-warning'
    )
));

其他几点

如果您使用按钮的翻译，那么上面的代码将删除该功能；这可以很容易地再次添加（只需查看按钮视图助手）。我删除了它以使示例更清晰
您还可以扩展它以向元素添加任意数量的其他选项（可能是按钮文本之前或之后的图标位置）。视图助手只需要读取此选项并输出正确的 HTML。

【讨论】：

【解决方案3】：

如果您只需要一个图标，使用 css 是一个更简单的选择，在表单文件中您只需将自定义 css 类添加到您的按钮，然后在您的样式表中使用 before 和内容如下：

$this->add(array(
        'type' => 'Button',
        'name' => 'submit',
        'options' => array(
            'label'   => 'Modifica',
        ),
        'attributes' => array(
            'type'  => 'submit',
            'class' => 'btn btn-warning custom-btn-with-icon'
        )
    ));

然后在css中：

.custom-btn-with-icon:before {
    content: '\uxf005'; // this is the unicode of the custom-char you need for your icon
    font-family: 'fontAwesome'; // and this is the icon font of your project
}

【讨论】：