Question

有没有人知道用Javascript或jQuery从WordPress Shortcode字符串中提取参数和内容到Javascript数组或变量中的方法？

这样的短代码：

[button url="http://...." color="#00000"]Contact me![/button]

或者像这样：

[tabs]

  [tab title="Title 1"]Content Tab 1[/tab]

  [tab title="Title 2"]Content Tab 2[/tab]

[/tabs]

我试图找到一个库或一些正在运行的正则表达式，但我找不到一些。

情况：

我已经开发了一个短代码生成器，它根据用户在输入字段中插入的值生成短代码。现在我想要oposit方式：

用户在编辑器中选择一个短代码并按下“使用生成器编辑”按钮，然后javascript从短代码中获取参数。之后，它使用jquery-ui从这个短代码打开对话框。然后它应该将值填充到匹配的字段到对话框中，以便用户可以轻松编辑它们。

我认为wordpress函数shortcode_atts（）的匹配javascript版本可以完成这项工作吗？！

谢谢你的帮助！

Answer 1

我要做的是在Shortcode中打印JS变量：

add_shortcode( 'buttons', 'js_vars_so_19604963' );

function js_vars_so_19604963( $atts, $content = null, $shortcode ) 
{
    $output = 'Normal shorcode work here';

    $output .= '<script type="text/javascript">
        var sc_button_color = "' . $atts['color']. '";
        </script>';

    return $output;
}

然后，使用JavaScript访问它们：console.log(sc_button_color)。

用户在编辑器中选择一个短代码并按下“使用生成器编辑”按钮，然后javascript从短代码中获取参数。

要知道用户在内容框中选择了什么，我们需要tinyMCE.activeEditor.selection.getContent。必须使用RegEx解析此getContent以提取确切的Shortcode及其属性。没有预先制定的解决方案，你必须从头开始逐个构建它。

Answer 2

WordPress在名为wp的{{1}}对象上有一个新对象。它是用于制作wp.shortcode Javascript对象的构造函数。您可以使用它的方法来做各种事情。我认为inspect the implementation in WordPress core最好，评论很好并且实施了一些方法。

此方法允许您处理字符串中的短代码，通过使用回调函数替换它们。

shortcode

当您需要从字符串中获取短代码以便在其他地方处理并保留对它们的引用时，此方法非常有用。

wp.shortcode.replace( tag, text, callback )

此方法生成RegExp以识别短代码。基本正则表达式在功能上等同于wp.shortcode.next( tag, text, index )中的正则表达式。

get_shortcode_regex()

此方法允许您从文本中解析短代码属性。

wp.shortcode.regexp( tag )

有更多观点，请参见核心。

使用Javascript提取WordPress短代码字符串

2 个答案: