Visual Composer custom shortcode template - custom_markup display user input

Question

I have created some shortcode elements. Now I want to customize the look of the elements in the backend editor.

From the description of the wiki of VC-Pagebuilder, I get out that I can use the "custom_markup" param for this.

For simple html it works fine. But I can not display the user input in the shortcode backend element.

<?php
    add_shortcode('simpletext', 'simpletext_shortcode');
    add_action('vc_before_init', 'simpletext_vc');

    // Frontend output

    function simpletext_shortcode($atts, $content = '') {
      ob_start();
      set_query_var('content', $content);
      get_template_part('components/content', 'simpletext');
      return ob_get_clean();
    }

    // Backend
    function simpletext_vc() {
      vc_map(array(
        "name" => "Einfacher Text",
        "base" => "simpletext",
        "class" => "",
        "icon" => get_template_directory_uri() ."/images/vc_icons/simpletext_icon.png", 
    "custom_markup" => '{{ content }}', // try to display the user input
    "category" => "Text",
    "params" => array(
      array(
        "param_name" => "content",
        "heading" => "Inhalt",
        "description" => "Inhalt des Elements.",
        "holder" => "div",
        "type" => "textarea_html"
      )
    )
   ));
  }
?>

I 'm grateful for any help .

Thereat

Did you ever figure this out? I've searched everywhere and so far have not found a solution. – Nab

No....Sorry,... – Thereat

I have a similar question here: #59934456 – Nab

Could you please provide some images here? – Rusel

My issue is ~5 year old. Please check the following issue #59934456 – Thereat

Answer 1

Here's an approach that can help you to achieve dynamic content representation in the backend:

1. Enqueue Custom JavaScript for Admin

function simpletext_vc_scripts() {
  wp_enqueue_script('simpletext-vc-custom', get_template_directory_uri() . '/js/simpletext-vc-custom.js', array('jquery'), '1.0', true);
}
add_action('admin_enqueue_scripts', 'simpletext_vc_scripts');

2. JavaScript to Modify Backend View In your simpletext-vc-custom.js:

(function($){
  $(document).ready(function(){
    if ( typeof vc !== 'undefined' ) {
      vc.events.on("shortcodes:simpletext:params_changed", function(model) {
        var params = model.get('params');
        var content = params.content || '';
        $(".vc_shortcode-param[data-param_type='simpletext']").each(function() {
          // Update the backend view
          $(this).find('.custom_markup_display').text(content);
        });
      });
    }
  });
})(jQuery);

3. Modify Your simpletext_vc Function You might need to adjust your custom_markup to include a placeholder where the JavaScript can insert the dynamic content:

"custom_markup" => '<div class="custom_markup_display">{{ content }}</div>',

Gemstone

Answer 2

In Page Builder, their older version which is very similar, you can use admin_label with a true or false value for each parameter to show the value entered after the user closes the popup. Might work in this case too.

Something like this:

"params" => array(
      array(
        "param_name" => "content",
        "heading" => "Inhalt",
        "description" => "Inhalt des Elements.",
        "holder" => "div",
        "type" => "textarea_html",
        "admin_label" => true
      )
    )

Englert