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

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

custom-post-typeswysiwyg

17 de ago. de 2010Paul Sheldrake

Digamos que seu tipo de postagem personalizada fosse chamado de 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 é o nosso tipo de postagem customizado, normal é o a localização da caixa meta e high especifica que ela deve ser mostrada o mais alto possível na página. (Geralmente abaixo do editor tinyMCE padrão).

Então, 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 meta box, 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 área de texto entre tinyMCE completo e uma área de texto básica, sem qualquer um dos botões de inserção HTML WP.

17 de ago. de 2010nobody

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

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

Eu estava perplexo quando eu corri através do artigo várias instâncias do TinyMCE 3 em uma página by 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 seguinte exatamente no formato/layout que meu cliente precisava:

_{(fonte: mikeschinkel.com )}

Então, se você estiver usando o código Thomas McDonaldacima você achar que você precisa modificar o layout, não deixe de conferir o incrível artigo de Hamilton Chua (obrigada Ham!}:

Várias instâncias do TinyMCE 3 em uma página

P.S.Se você fizer algo ligeiramente errado, o TinyMCE pode simplesmente não mostrar nada. 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 nenhum outro tema nem explorei o que mais está disponível; se você encontrar outros temas que funcionem, por favor deixe um comentário abaixo.)

Nota de rodapé

1 : Muito frustrante! Depois de pouco mais de um mês com o WordPress Resposta Agora estou esperando encontrar respostas para todas as minhas perguntas com o mesmo nível de qualidade que aqui, e em outros lugares eu sou tipicamente encontrando decepção!

12 de set. de 2010MikeSchinkel

Desde que encontrei este artigo como o primeiro resultado no Google, eu só queria comentar que 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() );

Onde quer que você queira adicionar o editor TinyMCE

Referência: wp_editor

12 de out. de 2014ejhost

Eu consegui apenas adicionando “theEditor” como atributo de classe para uma textarea:

<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>

4 de out. de 2011Markus René Einicher

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 matriz 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 de Keighl em seu blog que me apontou para ele. Leia o artigo, e talvez haja uma maneira de chamar wp_tiny_mce () em um plugin de seção admin e aplique-o a uma segunda área de texto que você criar.

17 de ago. de 2010kevtrout