Existe uma maneira de obter o número N de editores WYSIWYG em um tipo de postagem personalizado?


27

Existe maneira de ter vários editores WYSIWYG para um tipo de postagem personalizado? Por exemplo, se eu tivesse um layout de 2 colunas, desejaria ter um editor para uma coluna e outro editor para a outra.


Que tipo de configuração WYSIWYG você precisa? O painel completo incl. upload de imagens, modo de tela cheia etc?
hakre


Bueltge tem um artigo agradável que mostra como isso pode ser feito: wpengineer.com/1991/example-how-to-add-meta-boxes-to-edit-area
hakre

Preciso exatamente dessa pergunta respondida para um projeto de cliente. Obrigado por perguntar!
MikeSchinkel

MikeSchinkel - Eu sou novo no WordPress; onde coloco o código que você postou?

Respostas:


21

Digamos que seu tipo de postagem personalizado foi chamado Properties, você adicionaria a caixa para armazenar seu editor tinyMCE adicional usando um código semelhante a este:

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2é o ID que a meta box terá aplicado a ela, Second Columné o título que a meta box terá, second_column_boxé a função que imprimirá o HTML da meta box, propertiesé o nosso tipo de postagem personalizado, normalé o local da meta box e highespecifica que deve ser mostrado o mais alto possível na página. (Geralmente abaixo do editor tinyMCE padrão).

Então, tomando isso como o exemplo mais básico, você deve anexar o editor tinyMCE a uma área de texto. Ainda precisamos definir nossa second_column_boxfunção, que imprimirá o HTML para a meta box, para que este seja o melhor lugar para fazer isso:

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

Existem algumas questões que não tenho certeza de como superar. O editor tinyMCE será aninhado dentro de uma metabox, o que pode não ser o ideal, e não terá a capacidade de alternar entre os modos de edição HTML e Visual, bem como os comandos de inserção de mídia que o editor de postagem normal possui. A mudança dos modos parece ser definida como uma função cujo primeiro argumento é o ID, mas também parece codificado no script wp-tinymce. É possível usar as funções tinyMCE integradas para fazer isso, mas isso altera a área de texto entre tinyMCE completo e uma área de texto básica, sem nenhum dos botões de inserção de HTML do WP.


"Meta_boxen"? Impressionante! Eu pensei que era o único. Vou tentar a solução daqui a pouco.
mfields

A solução Thomas McDonalds não está funcionando para mim no 3.1 - existe uma maneira no 3.1 de fazer isso?

19

Primeiro: Muito obrigado a Thomas McDonald por sua resposta ; Eu precisava descobrir exatamente a mesma pergunta que @Paul Sheldrake fez e o código de Thomas me fez começar na direção certa.

Infelizmente, fiquei preso porque precisava alterar o layout do padrão para um layout mais simples e menor, pois precisava usar o TinyMCE em uma metabox lateral. Olhei praticamente em todos os lugares por uma solução e, especialmente, sobre a Moxiecode TinyMCE Wiki e TinyMCE Dicas & Como Fórum e não encontrou nada! 1 Tudo o que eu encontrei explicou como conjunto theme, width, height, etc. utilizando tinyMCE.init({...})mas aparentemente você não pode usar isso quando você usa tinyMCE.execCommand("mceAddControl").

Eu fiquei perplexo quando deparei com o artigo várias instâncias do TinyMCE 3 em uma página de Hamilton Chua , e ele acertou em cheio! Sua solução foi atribuir tinyMCE.settingsantes de ligar tinyMCE.execCommand("mceAddControl"), por exemplo:

<?php 
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#{$id}").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

A parte triste é que isso realmente não foi difícil, mas não estava documentado em nenhum outro lugar que eu pudesse encontrar. É incrível descobrir que quase ninguém mais teve esse problema.

De qualquer maneira, o código acima gerou o seguinte segundo TinyMCE exatamente no formato / layout que meu cliente precisava:

Vários TextAreas do TinyMCE no Editor de administração do WordPress 3.0
(fonte: mikeschinkel.com )

Portanto, se você estiver usando o código @Thomas McDonald acima, verá que precisa modificar o layout. Confira o incrível artigo de Hamilton Chua (obrigado Ham!) :

PS Se você fizer algo até um pouco errado, o TinyMCE pode não aparecer. Por exemplo, no meu caso, eu usotheme: "simple"no começo e não recebi nada e levei mais de uma hora para perceber que eu só precisava usá-lotheme: "advanced". Portanto, se você achar que o TinyMCE não está funcionando, tente mudar as coisas, pode estar tendo um problema semelhante. (BTW, eu não tentei nenhum outro tema nem explorei o que mais está disponível; se você encontrar outros temas que funcionam, por favor, deixe um comentário abaixo.)

Nota de rodapé

1 : Muito frustrante! Depois de pouco mais de um mês com a resposta do WordPress, agora espero encontrar respostas para todas as minhas perguntas com o mesmo nível de qualidade que aqui e em outros lugares, normalmente estou encontrando decepção!


Mike, você está perdendo um igual depois $scripte também não há fechamento para o seu heredoc, ou seja. EOT;. Além dos pequenos erros, é um bom exemplo de trabalho ..;)
t31os 13/11/2010

@ t31os - Obrigado por me avisar. Não tenho certeza de como eu senti falta deles; Normalmente teste e copio minhas respostas do meu código de trabalho. Vai saber!
MikeSchinkel

o uso dessa solução resultou no fato de o editor visual normal ter sido configurado como SimpleLayout para mim na versão 3.1.
mfields

@mfields - Que chatice que o 3.1 quebrou tantas coisas. :-(
MikeSchinkel

Queria chamar sua atenção para este artigo, pois ele pode esclarecer algumas coisas: dannyvankooten.com/450/…
marfarma 8/11

2

Desde que eu encontrei este artigo como o primeiro resultado no Google, eu só queria comentar que o WP agora oferece uma função para lidar com esse tipo de tarefa.

Dentro da add_meta_boxfunção, adicione o seguinte código ->

wp_editor( $content, $editor_id, $settings = array() );

Onde você quiser adicionar o editor TinyMCE

Referência: wp_editor


11
As respostas devem ser mais do que links simples . Na verdade, eles devem ser uma resposta em vez de uma rota em que alguém talvez encontre uma resposta. Ajude a impedir a podridão do link, edite sua resposta e forneça as informações necessárias que ajudam o OP, bem como visitantes posteriores, a resolver seu problema.
Kaiser #

0

O editor padrão, tinymce, é carregado por uma função no wp-admin / includes / post.php chamada wp_tiny_mce (); Procure a fonte na linha 1350. Há uma matriz de configurações na linha 1478. Uma das opções aparentemente designa o seletor de área de texto ao qual aplicar o editor de javascript. Eu estava lendo este post de Keighl em seu blog que me apontava para isso. Leia o artigo e talvez haja uma maneira de chamar wp_tiny_mce () em um plug-in da seção admin e aplicá-lo a uma segunda área de texto que você criar.


0

Eu entendi apenas adicionando "theEditor" como atributo de classe a uma área de texto:

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.