Question

我想知道是否有人知道在Visual Composer中使用custom_markup参数？我已经在link找到了一个解决方案，但似乎过时了。

我正在使用：

WordPress 4.8
Visual Composer 5.1

任何帮助将不胜感激。感谢。

Answer 1

仅供参考。您的问题中提供的主要链接已更新，他的解决方案与Wordpress 4.9.2和WPbakery Page Builder（以前的Visual Composer）完美配合5.4.5

js：

(function($) {
    window.VcCustomElementView = vc.shortcode_view.extend( {
        elementTemplate: false,
        $wrapper: false,
        changeShortcodeParams: function ( model ) {
            var params;

            window.VcCustomElementView.__super__.changeShortcodeParams.call( this, model );
            params = _.extend( {}, model.get( 'params' ) );
            if ( ! this.elementTemplate ) {
                this.elementTemplate = this.$el.find( '.vc_custom-element-container' ).html();
            }
            if ( ! this.$wrapper ) {
                this.$wrapper = this.$el.find( '.wpb_element_wrapper' );
            }
            if ( _.isObject( params ) ) {
                var template = vc.template( this.elementTemplate, vc.templateOptions.custom );
                this.$wrapper.find( '.vc_custom-element-container' ).html( template( { params: params } ) );
            }
        }
    } );
})(window.jQuery)

php：

vc_map(array(
    'name' => __( 'Custom Markup', 'js_composer' ),
    'base' => 'vc_custom_markup',
    'category' => array(
        __( 'Content', 'js_composer' ),
    ),
    'description' => __( 'Custom markup element', 'js_composer' ),
    'params' => array(
        array(
            'type' => 'textfield',
            'param_name' => 'style',
            'value' => 'custom style!',
        'heading' => 'Style',
      ),
      array(
          'type' => 'textfield',
          'param_name' => 'color',
          'value' => 'custom color!',
        'heading' => 'Color',
      ),
      array(
          'type' => 'textfield',
          'param_name' => 'title',
          'value' => 'custom title!',
        'heading' => 'Title',
      ),
    ),
    'js_view' => 'VcCustomElementView',
    'custom_markup' => '<div class="vc_custom-element-container">Style: "{{ params.style }}", Color: "{{ params.color }}", Title: "{{{ params.title }}}"</div>',
  )
);

所有积分均转至AngeIII

如何使用＆＃39; custom_markup＆＃39; Visual Composer中的参数＆＃39; vc_map＆＃39;？

1 个答案: