Como obter a entrada de um editor TinyMCE ao usar o front-end?

8

Não sei por que não consegui encontrar isso, mas alguém sabe como obter a opinião do editor do TinyMCE? Estou usando-o no front-end e quero poder salvar o que o usuário digitou no TinyMCE em um banco de dados, mas não consegue encontrar a melhor maneira de capturar esse valor.

As duas soluções que implementei com algum sucesso são:

  1. tinyMCE.activeEditor.getContent(); - Este parece apenas obter o valor do editor visual, portanto, se eu estiver no editor de HTML e fizer as alterações e, em seguida, salvar, elas não serão coletadas.

  2. $('#html_text_area_id').val(); - Este é o oposto, parece apenas obter o valor do editor de HTML.

Eu sei que há uma maneira melhor - eu simplesmente não consigo encontrá-lo ...

p.s Sim, vou implementar medidas de segurança para garantir que as pessoas não possam explodir o banco de dados.

    
por Sam 17.02.2012 / 07:40

6 respostas

22

Ok, aparentemente o WordPress monitora que tipo de editor (visual ou html) está ativo como uma classe que é adicionada ao wrapper de conteúdo, então aqui está uma solução que te dará o conteúdo mais recente no editor

function get_tinymce_content(){
    if (jQuery("#wp-content-wrap").hasClass("tmce-active")){
        return tinyMCE.activeEditor.getContent();
    }else{
        return jQuery('#html_text_area_id').val();
    }
}
    
por Bainternet 17.02.2012 / 22:12
1

Esse é o código que adicionei ao meu javascript, logo antes do envio do formulário.

// Find and loop through all TinyMCE editors.
jQuery('#the-form').find( '.wp-editor-area' ).each(function() {
    var id = jQuery( this ).attr( 'id' ),
        sel = '#wp-' + id + '-wrap',
        container = jQuery( sel ),
        editor = tinyMCE.get( id );

    // If the editor is in "visual" mode then we need to do something.
    if ( editor && container.hasClass( 'tmce-active' ) ) {
        // Saves the contents from a editor out to the textarea:
        editor.save();
    }
});
    
por Philipp 02.08.2014 / 16:54
0

Eu precisei de muito mais código para que funcionasse, e também estava recebendo um erro de javascript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..) Isso foi causado por uma atualização do wordpress de 3.x para 4. Então tive que clear my browser cache primeiro.

Primeiramente eu adicionei um retorno de chamada ao filtro wp tiny_mce_before_init no meu arquivo functions.php, isso me permitiu adicionar uma função de retorno de chamada js a ser disparada quando os editores foram inicializados:

add_filter( 'tiny_mce_before_init', array( $obj, 'filter_cb_mce_before_init' ) );

/**
 * Filter cb to add event listeners to tinymce editor.
 * @param  array $init An array of setup js functions as strings.
 * @return array       Returns new array of js function strings.
 */
function filter_cb_mce_before_init( array $init ) {
        $init['setup'] = "function(ed){
                if(get_tinymce_content)  //not required, I use it as flag to check if on correct page
                    ed.on('change', function(){ get_tinymce_content() });
            }";
        return $init;
    }

A seguir, a função javascript para fazer o que quiser com o conteúdo quando ele for alterado. Adicione este javascript usando wp_enqueue_scripts à página desejada.

  /**
   * Get the content of the tinyMCE editor.
   * @link http://wordpress.stackexchange.com/questions/42652/how-to-get-the-input-of-a-tinymce-editor-when-using-on-the-front-end
   * @return {string} Returns the content
   */
  function get_tinymce_content(){

    //change to name of editor set in wp_editor()
    var editorID = 'my_editor_id';

    if (jQuery('#wp-'+editorID+'-wrap').hasClass("tmce-active"))
        var content = tinyMCE.get(editorID).getContent({format : 'raw'});
    else
        var content = jQuery('#'+editorID).val();

    console.log(content);
}

O código funcionou quando usei o seguinte para imprimir o editor em qualquer página:

<?php wp_editor( @$event->description, 'my_editor_id', array(
    'media_buttons' => false,
    'textarea_name' => 'data[description]',
    'quicktags'     => array("buttons"=>"link,img,close"),
) ); ?>
    
por Daithí 05.01.2015 / 06:44
0

Você pode obter o conteúdo dependendo do modo atual do editor.

function get_tinymce_content()
    {
    if (jQuery(".switch-tmce").css('background-color')=='rgb(245, 245, 245)')
        return tinyMCE.activeEditor.getContent();
    else
        return jQuery('#html_text_area_id').val();
    }

A guia Visual tem uma classe switch-tmce que você pode usar para identificá-la como uma guia. Você saberia que ele foi focado se tiver a cor de fundo mais clara. Então, você também pode usar isso para determinar qual das duas guias está ativa.

Esta é uma solução adaptativa baseada em . stackexchange.com/questions/42652/how-to-get-the-input-of-a-tinymce-editor-when-using-on-the-front-end/42729#42729">answer . Provavelmente existem outras maneiras melhores de fazê-lo, mas esta funcionou bem para mim.

    
por Abel Melquiades Callejo 15.12.2015 / 21:37
0

Você também pode usar addeditor event:

  /// Fires when an editor is added to the EditorManager collection.
  tinymce.on('addeditor', function( event ) {
    var editor = event.editor;
    var $textarea = $('#' + editor.id);
    console.log($textarea.val());
  }, true );

Documentação do evento 'addeditor' do TinyMCE

    
por Camille Descombes 15.11.2016 / 18:16
0

Isso funcionou para mim:

if (jQuery("#wp-description-wrap").hasClass("tmce-active")){
    description1 = tinyMCE.activeEditor.getContent( { format : 'html' } );
}else{
    description1 = jQuery('[name="description"]').val();

Onde descrição é o ID do editor de tinymce e de código após o else da resposta aceita, não funcionou para mim.

    
por Alfredo Cebrián 23.03.2017 / 07:21