javascript - 使用 Javascript 提取 WordPress 简码字符串

Question

有谁知道使用 Javascript 或 jQuery 从 WordPress 短代码字符串中提取参数和内容到 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]

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

情况:

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

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

我认为 wordpress 函数 shortcode_atts() 的匹配 javascript 版本可以完成这项工作？!

感谢您的帮助!

Answer 1

我要做的是在短代码中打印 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)。

---

A user selects a shortcode in the editor and presses a button "edit with generator" and then the javascript gets the parameters from the shortcode.

要知道用户在我们需要的内容框中选择了什么tinyMCE.activeEditor.selection.getContent .此 getContent 必须使用 RegEx 进行解析以提取准确的简码及其属性。没有针对此问题的预制解决方案，您必须根据具体情况从头开始构建。