Como incluo um editor TinyMCE no frontend?

22

Estou tentando adicionar um editor TinyMCE no meu front-end, de onde os usuários podem postar, mas até agora não tiveram sorte. Aqui está o código:

PHP:

add_action('wp_print_scripts', 'my_enqueue_scripts');

function my_enqueue_scripts() {      
        wp_enqueue_script( 'tiny_mce' );
        if (function_exists('wp_tiny_mce')) wp_tiny_mce();
}

Javascript:

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"editor"
    });
});

HTML:

<textarea rows="8" cols="40" name="description" id="editor" class="required"><?php echo $description;?></textarea>

Problema: o editor de texto não está sendo adicionado à área de texto. Embora o arquivo js do TinyMCE esteja sendo carregado.

tinymce front-end

— Sisir
fonte

1

Talvez você vai encontrar alguma inspiração ao olhar para o código do Editor de Frontend

— mike23

17

Bem, graças ao wp 3.3 agora temos wp_editor()função para fazer isso :)

— Sisir
fonte

1

Sim, só que emite o editor diretamente, ao invés de permitir que você usá-lo em um shortcode ...

— cale_b

4

Você pode usar isso em um código de acesso usando as funções php ob_content. Essas funções permitem capturar a saída em uma variável. Assim: ob_start (); include (static :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); retornar $ template;

— Tosh

2

editor_selector é para segmentar classes, não IDs.

Além disso, ao usar editor_selector, é necessário definir mode: "specific_textareas"para que ele funcione.

Consulte http://tinymce.moxiecode.com/wiki.php/Configuration:editor_selector

Portanto, seu JavaScript e HTML devem ficar assim:

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "specific_textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"tinymce-enabled"
    });
});

<textarea rows="8" cols="40" name="description" id="editor" class="tinymce-enabled required"><?php echo $description;?></textarea>

— maryisdead
fonte

0

Embora a resposta @maryisdead possa estar certa, darei outra dica, primeiro verifique se há apenas um elemento em sua página com o id = "editor" e depois configure o seguinte:

tinyMCE.init({
    ...
    mode : "exact",
    elements : "editor"
});

Use também o jQuery em vez de $ no seu código javascript para garantir que você esteja chamando os métodos e seletores do jQuery.

— adrian7
fonte

0

editor_selector é para classes e não para IDs.

Você deve usar o valor do editor_selector como o nome da classe da área de texto.

— Franklin Inbaraj
fonte