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.
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.
Respostas:
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 high
especifica 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_box
funçã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.
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.settings
antes 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:
(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.)
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!
$script
e também não há fechamento para o seu heredoc, ou seja. EOT;
. Além dos pequenos erros, é um bom exemplo de trabalho ..;)
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_box
função, adicione o seguinte código ->
wp_editor( $content, $editor_id, $settings = array() );
Onde você quiser adicionar o editor TinyMCE
Referência: wp_editor
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.
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>