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

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