ZF2表单中的按钮内容

Osc*_*lli 3 zend-form zend-form-element zend-framework2

如何编辑Button元素(ZF2表单)的按钮内容?我可以设置一个标签,但我想在其中插入一些HTML代码.

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

谢谢

Thé*_*ret 14

您只需使用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'
         )
    ));
Run Code Online (Sandbox Code Playgroud)


Ale*_*exP 5

FormButton@Sam正确提到,视图助手将自动转义按钮HTML内容.

避免这种情况的唯一方法是使用自定义表单按钮视图助手.而不是删除转义功能(因为按钮文本内容应该仍然被转义); 你可以扩展视图助手并添加一个额外的选项,以允许你渲染html(我假设这是一个bootstrap图标).

例如

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();
    }

}
Run Code Online (Sandbox Code Playgroud)

然后使用服务管理器中的按钮视图助手的默认注册名称('form_button')创建一个'可调用的'配置条目.这将意味着我们将使用视图助手而不是默认值Zend\Form\View\Helper\FormButton.

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

最后,更改按钮元素规范以添加新的"图标"选项

$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'
    )
));
Run Code Online (Sandbox Code Playgroud)

其他一些观点

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