Extraia o WordPress Shortcode String com Javascript - javascript, wordpress, shortcode

Alguém sabe um método para extrair os parâmetros e conteúdo do WordPress Shortcode Strings com JavaScript ou jQuery em um array de JavaScript ou variáveis?

Códigos de acesso como este:

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

ou assim:

[tabs]

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

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

[/tabs]

Eu tentei encontrar uma biblioteca ou algum regex de trabalho, mas eu não consegui encontrar alguns.

Situação:

Eu já desenvolvi um gerador de shortcode, que gera códigos de acesso dos valores que os usuários inseriram nos campos de entrada. Agora eu quero o caminho do oposit:

Um usuário seleciona um shortcode no editor epressiona um botão "editar com gerador" e, em seguida, o javascript recebe os parâmetros do shortcode. Depois disso, ele abre o diálogo a partir deste shortcode usando jquery-ui. Em seguida, ele deve preencher os valores nos campos correspondentes na caixa de diálogo, para que o usuário possa editá-los facilmente.

Eu acho que uma versão javascript correspondente da função wordpress shortcode_atts () faria o trabalho ?!

Thx pela sua ajuda!

Respostas:

2 para resposta № 1

O que eu faço é imprimir variáveis ​​JS dentro do Shortcode:

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;
}

Então, acesse-os em JavaScript: console.log(sc_button_color).

---

Um usuário seleciona um shortcode no editor e pressiona um botão "edit with generator" e, em seguida, o javascript obtém os parâmetros do shortcode.

Para saber o que o usuário selecionou na caixa de conteúdo, precisamos tinyMCE.activeEditor.selection.getContent. este getContent tem que ser analisado com RegEx para extrair o Shortcode exato e seus atributos. Não há solução pré-fabricada para isso e você terá que construí-lo a partir do zero, caso a caso.

---

1 para resposta № 2

WordPress tem um novo objeto no wp objeto chamado shortcode. É uma função construtora para criar objetos Javascript wp.shortcode. Você pode usar os métodos para fazer todos os tipos de coisas. Eu acho que é melhor inspecionar a implementação no núcleo do WordPress, é bem comentado e tem alguns métodos implementados.

Esse método permite processar códigos de acesso em uma cadeia substituindo-os por meio do uso de uma função de retorno de chamada.

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

Esse método é útil quando você precisa capturar códigos de acesso de uma string para processamento em outro local e manter uma referência a eles.

wp.shortcode.next( tag, text, index )

Este método gera um RegExp para identificar um shortcode. O regex base é funcionalmente equivalente ao encontrado em get_shortcode_regex().

wp.shortcode.regexp( tag )

Esses métodos permitem que você analise os atributos de código de acesso do texto.

wp.shortcode.attrs( text )

Há uma visão mais, veja o núcleo para isso.

---