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

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.

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

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.

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/

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.