Solução para processar códigos de acesso no Admin Editor

19

Eu fiz esta pergunta há um ano e espero que haja algum tipo de solução simples que me permita atingir meu objetivo. Então aqui vai:

Frequentemente utilizo códigos de acesso no Admin Editor, mas quando ligo para o cliente, eles geralmente não entendem como funcionam.

O que estou procurando é uma solução que simplesmente renderiza automaticamente a saída de associação de códigos de acesso dentro do editor admin WYSIWYG.

De uma perspectiva visual, gostaria que isso fosse exibido de forma semelhante à exibição da linha "mais" ou quando uma imagem for exibida no editor. Com isso, quero dizer que o usuário veria a saída, mas só conseguiria excluí-la, mas não editaria o conteúdo do shortcode renderizado.

    
por NetConstructor.com 15.12.2011 / 16:43

3 respostas

19

Na verdade, não é tão ruim fazer o que você está pedindo. Isso levará cerca de uma hora para você fazer o primeiro e 10 minutos para fazer os seguintes.

Em última análise, o que você vai fazer é criar um plugin TinyMCE. Aqui está o que você deve armar para começar:

  1. Guia geral para criar um plug-in de tinymce
  2. Exemplo de código de WordPress Core
  3. Um guia geral sobre como adicionar um plugin TinyMCE ao WordPress. Eu encontrei este , que parece adequado.

Agora você tem todas as ferramentas para fazer isso! De tudo isso, o código que será de maior interesse para você é esse bloco no código de exemplo do WP:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Aqui, o código de acesso de uma galeria é substituído por uma tag img . A tag img tem a classe wp-gallery , que é estilizada por o CSS encontrado aqui .

Editar 2016-04-06: Conteúdo e links atualizados para o TinyMCE 4 e WordPress 4.4

    
por Matthew Boynes 30.01.2012 / 23:42
0

Esta não é uma resposta completa, apenas uma direção de design. Eu acho que a melhor abordagem é algo assim:

Na postagem de edição do administrador

Copie todos os códigos de acesso da postagem salva e renderize-os dentro de um metabox, além do editor . Certifique-se de que eles aparecem na mesma ordem em que os códigos de acesso ocorrem no editor minúsculo.

Na API javascript tinyMCE

Faça uma função jQuery, quando o usuário clica em um shortcode, troca o HTML do metabox no editor. E vice versa. Os pedidos em si devem estar ok como associação, mas não estou certo sobre a inclusão de códigos de acesso. No entanto, há muitas maneiras de criar uma boa conexão de identificação. As atualizações de códigos de acesso podem ser feitas em tempo real com o ajax.

Nunca salve o estado do shortcode renderizado

Antes de alternar editores, salvar rascunhos, autodimensionamentos e publicar, faça uma chamada de API para acionar a restauração, para que o estado de shortcode renderizado nunca seja salvo ...

Isso pode ser feito, mas você precisa estar familiarizado com a API tinyMCE para entender onde e quando acessar o conteúdo do editor e conectar-se a ações de javascript antes de "salvar" e muito mais.

Pode haver vários editor tinyMCE no mesmo número de edição de postagem de edição.

A parte de restauração pode ser investigada olhando o [gallery] shortcode beaviour. Mas o clique em [MY_SHORTCODE] tem que ser feito por alguns truques do jQuery.

no script admin_footer, acesse o conteúdo de onde o cursor está ativo:

var $editor_content = $(tinymce.activeEditor.getBody());

é uma sugestão de como começar.

    
por Jonas Lundman 10.06.2018 / 03:00
0

Eu estava procurando uma maneira de exibir graficamente e ajustar códigos de acesso também. E agora, finalmente, eu encontrei um tutorial que faz exatamente isso: enlace

Eu adiciono a descrição para que os mecanismos de pesquisa a identifiquem:

  

Vamos criar um plugin simples com um shortcode, então estamos   vai adicionar um botão editor TinyMCE para inserir esse shortcode através de um   pop-up que irá recolher toda a entrada do usuário para o shortcode   atributos. Então, vamos substituir o shortcode no TinyMCE   editor com uma imagem de espaço reservado, muito parecida com a galeria nativa de   WordPress (que na verdade é um shortcode, caso você não saiba),   e por último - vamos permitir a edição do shortcode e sua   atributos clicando duas vezes na imagem do espaço reservado.

    
por Marc Chéhab 23.06.2018 / 22:14