Bagaimana cara mendapatkan input editor TinyMCE saat menggunakan di front-end?

Saya tidak yakin mengapa saya belum dapat menemukan ini, tetapi apakah ada yang tahu bagaimana cara mendapatkan input dari editor TinyMCE? Saya menggunakannya di ujung depan dan ingin dapat menyimpan apa pun yang diketik pengguna ke TinyMCE ke database tetapi tidak dapat menemukan cara terbaik untuk menangkap nilai itu.

Dua solusi yang telah saya terapkan dengan beberapa keberhasilan adalah:

1. tinyMCE.activeEditor.getContent(); - Yang ini sepertinya hanya mendapatkan nilai dari editor visual jadi jika saya berada di editor HTML dan membuat perubahan dan kemudian menyimpan, mereka tidak diambil.

2. $('#html_text_area_id').val(); - Yang ini kebalikannya, sepertinya hanya mendapatkan nilai dari editor HTML.

Saya tahu ada cara yang lebih baik - sepertinya saya tidak bisa menemukannya ...

ps Ya, saya akan menerapkan langkah-langkah keamanan untuk memastikan orang tidak dapat meledakkan basis data.

Ok rupanya WordPress melacak jenis editor (visual atau html) yang aktif sebagai kelas yang ditambahkan ke pembungkus konten, jadi di sini ada solusi yang akan memberi Anda konten terbaru di 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();
    }
}

Itulah kode yang saya tambahkan ke javascript saya, tepat sebelum formulir dikirimkan.

// 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();
    }
});

Ini bekerja untuk saya:

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

Di mana deskripsi adalah ID editor tinymce dan kode de setelah jawaban lain yang diterima, tidak berfungsi untuk saya.

Saya memerlukan lebih banyak kode untuk membuatnya berfungsi, dan juga mendapatkan kesalahan javascript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..)Ini disebabkan oleh peningkatan wordpress dari 3.x ke 4. Jadi saya harus clear my browser cacheterlebih dahulu.

Pertama saya menambahkan panggilan balik ke filter wp tiny_mce_before_initdi file functions.php saya, ini memungkinkan saya untuk menambahkan fungsi panggilan balik js yang akan diaktifkan ketika editor diinisialisasi:

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

Selanjutnya fungsi javascript untuk melakukan apa yang diinginkan dengan konten ketika itu berubah. Tambahkan javascript ini menggunakan wp_enqueue_scripts ke halaman yang Anda inginkan.

  /**
   * 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);
}

Kode berfungsi ketika saya menggunakan yang berikut ini untuk mencetak editor ke halaman mana saja:

<?php wp_editor( @$event->description, 'my_editor_id', array(
    'media_buttons' => false,
    'textarea_name' => 'data[description]',
    'quicktags'     => array("buttons"=>"link,img,close"),
) ); ?>

Anda bisa mendapatkan konten tergantung pada mode editor saat ini.

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();
    }

The Visual tab memiliki kelas switch-tmceyang dapat Anda gunakan untuk mengidentifikasi sebagai tab. Anda akan tahu bahwa itu telah difokuskan jika memiliki warna latar belakang yang lebih terang. Jadi, Anda juga dapat menggunakannya untuk menentukan tab mana yang aktif.

Ini adalah solusi adaptif berdasarkan Bainternet 's jawaban . Mungkin ada cara lain yang lebih baik untuk melakukannya tetapi yang ini bekerja dengan baik untuk saya.

Anda juga dapat menggunakan addeditoracara:

  /// 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 );

Dokumentasi acara 'tambahitor' TinyMCE