如何在 Visual Composer 'vc_map' 中使用 'custom_markup' 参数？

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