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

26

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

    
por Paul Sheldrake 17.08.2010 / 12:09
fonte

5 respostas

20

Digamos que seu tipo de postagem personalizado se chama Properties , você adicionaria a caixa para manter 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 ele, Second Column é o título que a meta box terá, second_column_box é a função que imprimirá o HTML para a meta box, properties é nosso tipo de postagem personalizado, normal é o local da caixa meta e high especifica que deve ser mostrado o mais alto possível na página. (Geralmente abaixo do editor tinyMCE padrão).

Depois, considerando isso como o exemplo mais básico, você deve anexar o editor tinyMCE a uma área de texto. Ainda temos que definir nossa função second_column_box , que irá imprimir o HTML para a caixa meta, então este é um lugar tão bom quanto qualquer outro 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;
}

Há alguns problemas que não tenho certeza de como superar. O editor tinyMCE será aninhado dentro de um metabox, 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. Alternar os modos parece ser definido como uma função cujo primeiro argumento é o ID, mas ele também parece ser codificado no script wp-tinymce. É possível usar as funções tinyMCE incorporadas para fazer isso, mas isso altera a textarea entre tinyMCE completo e uma textarea básica, sem qualquer um dos botões de inserção HTML do WP.

    
por nobody 17.08.2010 / 13:30
fonte
18

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

Infelizmente, fiquei preso porque precisei mudar o layout do padrão para um layout mais simples e menor, já que precisava usar o TinyMCE em um metabox secundário. Eu procurei praticamente em todos os lugares para uma solução e especialmente no MoxieCode Wiki do TinyMCE e TinyMCE Tips & How To Forum e não encontrou nada! 1 Tudo que encontrei explicou como definir theme , width , height , etc. usando tinyMCE.init({...}) mas aparentemente você não pode usar isso quando usa tinyMCE.execCommand("mceAddControl") .

Eu estava perplexo quando encontrei o artigo várias instâncias do TinyMCE 3 em uma página Hamilton Chua , e ele acertou em cheio! Sua solução foi atribuir tinyMCE.settings antes de chamar 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 não foi difícil, mas não foi documentado em nenhum outro lugar que eu pudesse encontrar. É incrível descobrir que quase ninguém mais passou por esse problema.

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

Então,sevocêestáusandoocódigo@ThomasMcDonaldacima,vocêtemalgumanecessidadedemodificarolayout,nãodeixedeconferiroincrívelartigodeHamiltonChua(obrigadoHam!):

P.S. Se você fizer algo um pouco errado, o TinyMCE pode simplesmente não aparecer. Por exemplo, no meu caso eu uso theme: "simple" no começo e não tenho nada e levei mais de uma hora para perceber que eu precisava usar theme: "advanced" . Então, se você achar que o TinyMCE não está funcionando, certifique-se de tentar mudar as coisas, você pode estar tendo um problema semelhante. (BTW, eu não tentei quaisquer outros temas, 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 o WordPress Answer Agora estou esperando encontrar respostas para todas as minhas perguntas com o mesmo nível de qualidade que aqui, e em outros lugares eu estou tipicamente encontrando decepção!

    
por MikeSchinkel 12.09.2010 / 10:47
fonte
1

Desde que 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 função add_meta_box , adicione o seguinte código - >

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

Sempre que você quiser adicionar o editor TinyMCE

Referência: wp_editor

    
por ejhost 12.10.2014 / 21:49
fonte
0

O editor padrão, tinymce, é carregado por uma função em wp-admin / includes / post.php chamada wp_tiny_mce (); Procure na fonte na linha 1350. Há uma variedade de configurações na linha 1478. Uma das opções aparentemente designa o seletor de área de texto para aplicar o editor de javascript. Eu estava lendo este post por Keighl em seu blog que me apontou para ele. 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 criada por você.

    
por kevtrout 17.08.2010 / 13:28
fonte
0

Comprei 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>
    
por Markus René Einicher 04.10.2011 / 13:55
fonte