Visual Composer: Custom markup element example

custom_view.js

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 $element = $( _.template( this.elementTemplate, { params: params }, vc.templateOptions.custom ) );
				this.$wrapper.find( '.vc_custom-element-container' ).html( $element );
			}
		}
	} );

mapping

<?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',
  	    'name' => 'style',
  	    'value' => 'custom style!'
  	    'heading' => 'Style',
  	  ),
  	  array(
  	    'type' => 'textfield',
  	    'name' => 'color',
  	    'value' => 'custom color!'
  	    'heading' => 'Color',
  	  ),
  	  array(
  	    'type' => 'textfield',
  	    '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>',
  )
);