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

19

Fiz essa pergunta há cerca de um ano e espero que exista algum tipo de solução simples que me permita alcançar meu objetivo. Então aqui vai:

Costumo utilizar códigos de acesso no Editor de administração, mas quando entrego isso ao cliente, eles geralmente não entendem como funcionam.

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

De uma perspectiva visual, eu gostaria que isso fosse exibido de maneira semelhante a quando a linha "mais" aparecer ou quando uma imagem for exibida dentro do editor. Com isso, quero dizer que o usuário veria a saída, mas só poderia excluí-la, mas não editar o conteúdo do código abreviado renderizado.

NetConstructor.com
fonte
Você leu este artigo ( wp.tutsplus.com/tutorials/theme-development/… )? Verifique a parte do TinyMCE.
cr0z3r
1
Eu li isso, mas, até onde posso dizer, lida apenas com a criação / registro de códigos curtos e a criação de botões para o editor inserir rapidamente códigos curtos ... Mas nenhuma informação sobre a renderização desses códigos curtos com as contrapartes do bloco HTML, como eu descrevi.
NetConstructor.com
Você quer incluir um auxílio visual que represente qualquer código de acesso que você inclua e que não substitua o código de acesso pelo HTML real? ou seja, o espaço reservado da galeria, que não é realmente o código da galeria, mas um espaço reservado visual que apenas informa ao usuário: "Ei, há uma galeria aqui"?
Matthew Boynes
Exatamente! E eu gostaria que ele seja um pouco flexível, permitindo, assim, me personalizá-lo em uma base por shortcode (semelhante a como você disse a galeria ou quando uma imagem é incluída)
NetConstructor.com

Respostas:

19

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

Por fim, o que você fará é criar um plug-in TinyMCE. Aqui está o que você deve se preparar para começar:

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

Agora você tem todas as ferramentas para fazê-lo! De tudo isso, o código que será do seu interesse é 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 para uma galeria é substituído por uma imgtag. A imgtag possui a classe wp-gallery, que é denominada pelo CSS encontrado aqui .

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

Matthew Boynes
fonte
interessante! deixe-me perguntar-lhe ... o que você achou de ter o conteúdo real de todos os códigos de acesso convertido automaticamente no conteúdo associado?
NetConstructor.com
Tudo isso depende do conteúdo. Primeiro, lembre-se de que alguns HTML são removidos, têm problemas para renderizar no TinyMCE, etc. Segundo, digamos que seu código de acesso renderize um bloco de HTML complexo - se o usuário editá-lo, pode inadvertidamente quebrá-lo. Terceiro, se o seu código curto tiver opções, essas opções serão tornadas não editáveis, a menos que você mate todo o bloco HTML e refaça o código curto. As chances são de que, se seu código é complexo o suficiente para que você precise de um código curto, acho que o espaço reservado é sua melhor aposta.
Matthew Boynes
Você já viu uma solução de mais alguém sobre isso?
NetConstructor.com
0

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

Na postagem de edição do administrador

Rasgue todos os códigos de acesso da postagem salva e renderize-a dentro de uma metabox, além do editor . Verifique se eles aparecem na mesma ordem em que os códigos de acesso ocorrem no pequeno Editor.

Na API javascript tinyMCE

Crie uma função jQuery, quando o usuário clica em um código de acesso, ele troca o HTML da metabox pelo editor. E vice versa. A ordem em si deve estar bem como associação, mas não tenho certeza sobre o fechamento de códigos de acesso. No entanto, existem 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 ajax.

Nunca salve o estado de código abreviado renderizado

Antes de alternar entre editores, salvar rascunhos, rascunhos automáticos e publicar, faça uma chamada de API para acionar a restauração, para que o estado de código de acesso 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 javascript antes de 'salvar' e muito mais.

Pode haver vários editores tinyMCE no mesmo carregamento de postagem de edição.

A parte de restauração pode ser investigada observando o [gallery]código de acesso curto. Mas o clique [MY_SHORTCODE]deve ser feito com 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 dica de como começar.

Jonas Lundman
fonte
0

Eu estava procurando uma maneira de exibir e ajustar graficamente os códigos de acesso também. E agora, finalmente, encontrei um tutorial que faz exatamente isso: https://generatewp.com/take-shortcodes-ultimate-level/

Captura de tela

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

Vamos criar um plugin simples com um código de acesso e, em seguida, adicionaremos um botão do editor TinyMCE para inserir esse código através de um pop-up que coletará toda a entrada do usuário para os atributos de código de acesso. Em seguida, substituiremos o código abreviado no editor TinyMCE por uma imagem de espaço reservado, como a galeria nativa do WordPress (que na verdade é um código abreviado, caso você não saiba) e, por último - vamos permitir a edição do shortcode e seus atributos clicando duas vezes na imagem do espaço reservado.

Marc Chéhab
fonte