Visual Composer 自定义短代码模板 - custom_markup 显示用户输入

Question

我创建了一些短代码元素。现在我想在后端编辑器中自定义元素的外观。

从 VC-Pagebuilder wiki 的 description 中，我发现我可以为此使用“custom_markup”参数。

对于简单的 html 来说它工作得很好。但我无法在短代码后端元素中显示用户输入。

<?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"
      )
    )
   ));
  }
?>

我很感激任何帮助。

Answer 1

在 Page Builder（其旧版本非常相似）中，您可以使用

admin_label

为每个参数指定 true 或 false 值，以显示用户关闭弹出窗口后输入的值。在这种情况下也可能有效。

类似这样的：

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

Answer 2

这里有一种方法可以帮助您在后端实现动态内容表示：

1。为管理员排队自定义 JavaScript

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 修改后端视图 在您的 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.修改您的 simpletext_vc 函数 您可能需要调整您的 custom_markup 以包含 JavaScript 可以插入动态内容的占位符：

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