Làm cách nào để có được đầu vào của trình soạn thảo TinyMCE khi sử dụng ở mặt trước?

Tôi không chắc tại sao tôi không thể tìm thấy cái này, nhưng có ai biết làm thế nào để có được đầu vào của trình soạn thảo TinyMCE không? Tôi đang sử dụng nó ở giao diện người dùng và muốn có thể lưu bất cứ thứ gì người dùng đã nhập vào TinyMCE vào cơ sở dữ liệu nhưng không thể tìm ra cách tốt nhất để nắm bắt giá trị đó.

Hai giải pháp mà tôi đã thực hiện với một số thành công là:

1. tinyMCE.activeEditor.getContent(); - Cái này dường như chỉ nhận được giá trị của trình soạn thảo trực quan, vì vậy nếu tôi ở trong trình chỉnh sửa HTML và thực hiện các thay đổi và sau đó lưu, chúng sẽ không được chọn.

2. $('#html_text_area_id').val(); - Cái này thì ngược lại, nó dường như chỉ nhận được giá trị của trình soạn thảo HTML.

Tôi biết có một cách tốt hơn - tôi dường như không thể tìm thấy nó ...

ps Có, tôi sẽ thực hiện các biện pháp bảo mật để đảm bảo mọi người không thể làm nổ tung cơ sở dữ liệu.

Ok rõ ràng WordPress theo dõi loại trình soạn thảo (trực quan hoặc html) nào đang hoạt động như một lớp được thêm vào trình bao bọc nội dung, vì vậy đây là một giải pháp sẽ giúp bạn có được nội dung mới nhất trong trình chỉnh sửa

function get_tinymce_content(){
    if (jQuery("#wp-content-wrap").hasClass("tmce-active")){
        return tinyMCE.activeEditor.getContent();
    }else{
        return jQuery('#html_text_area_id').val();
    }
}

Đó là mã tôi đã thêm vào javascript của mình, ngay trước khi biểu mẫu được gửi.

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

Điều này làm việc cho tôi:

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

Trong đó mô tả là ID của trình soạn thảo tinymce và mã de sau khi câu trả lời khác được chấp nhận, không hoạt động đối với tôi.

Tôi đã yêu cầu nhiều mã hơn để làm cho nó hoạt động và cũng gặp lỗi javascript: Deprecated TinyMCE API call: <target>.onKeyUp.add(..)Điều này là do nâng cấp wordpress từ 3.x lên 4. Vì vậy tôi phải làm clear my browser cachetrước.

Đầu tiên tôi đã thêm một hàm gọi lại vào bộ lọc teh wp tiny_mce_before_inittrong tệp tin.php của tôi, điều này cho phép tôi thêm chức năng gọi lại js sẽ được kích hoạt khi trình soạn thảo được khởi chạy:

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

Tiếp theo chức năng javascript để làm những gì từng muốn với nội dung khi nó thay đổi. Thêm javascript này bằng wp_enqueue_scripts vào trang bạn muốn.

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

Mã này hoạt động khi tôi sử dụng cách sau để in trình soạn thảo sang bất kỳ trang nào:

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

Bạn có thể lấy nội dung tùy thuộc vào chế độ hiện tại của trình chỉnh sửa.

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

Các trực quan tab có một lớp switch-tmcemà bạn có thể sử dụng để xác định nó như là một tab. Bạn sẽ biết rằng nó đã được tập trung nếu nó có màu nền nhạt hơn. Vì vậy, bạn cũng có thể sử dụng điều đó để xác định tab nào đang hoạt động.

Đây là một giải pháp thích ứng dựa trên câu trả lời của Bai Internet . Có lẽ có nhiều cách khác tốt hơn để làm điều đó nhưng cách này hiệu quả với tôi.

Bạn cũng có thể sử dụng addeditorsự kiện:

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

Tài liệu sự kiện 'người bổ sung' của TinyMCE