How to use 'custom_markup' parameter in Visual Composer 'vc_map'?

Question

I was wondering if anyone have a clue about using custom_markup parameter in Visual Composer? I've came across with a solution in this link but it seems outdated.

I'm using:

• WordPress 4.8
• Visual Composer 5.1

Any help will be appreciated. Thanks.

Answer 1

FYI the gist link provided in your question has been updated and his solution is working perfectly with Wordpress 4.9.2 and WPbakery Page Builder (formerly 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>',
  )
);

All credits go to AngeIII