WYSIWYG Editor Not Working Correctly

Hej there!

Guys, I am having the same problem with METABOX 5.3.6.
I did register a WYSIWYG metabox and its behavior is completely erratic.

The data I enter on the VISUAL tab is not visible no the CODE tab, and vice versa. Switching tabs does not update its contents. Also, sometimes it does not save when I publish the post. Sometimes it does. It's strange.

Reverting back to 5.3.5 solves the problem...
But it is not a solution — we need to stay up-to-date.

Any ideas?
G.

Hi,

I’m working on this issue and will try to fix it tomorrow.

Hey guys, can you please try this file wysiwyg.js and see if it fixes the bug? Just copy it and overwrite the file js/wysiwyg.js in the plugin folder.

I've fixed the Visual tab not showing content and not saving content.

Hello Ahn!

No, it is not working for me (although I have not tested on a clean default themed WordPress). Behavior:

If I open a post with already WYSIWYG content on it, the VISUAL tab do not load at all, just the CODE tab.

If I create a brand new post and add content, in VISUAL all is OK, I can write and yes, I can switch between CODE and VISUAL again. But in the moment I do save the post and screen reloads, the VISUAL is completely gone (I mean the textarea editor field too), but code is there.

On this very recent post, if I SHIFT+Refresh, the VISUAL field is back on track, however the content on it is rendered all in white color (can't see anything unless I select with mouse) and it is formatted in HTML, I can see the <p> tags, etc etc, exactly as the same on CODE tab.

Note: the meta-data IS saved correctly to the database.

But my theme situation could be interfering perhaps... I do register the metabox based on a IF/ELSE who looks what $POST_ID is being edited. It's something I needed to do in my theme for other reasons:

$post_id = null;
if ( isset( $_GET['post'] ) ) {
    $post_id = intval( $_GET['post'] );
} elseif ( isset( $_POST['post_ID'] ) ) {
    $post_id = intval( $_POST['post_ID'] );
}

if ($post_id == 111) {
    $meta_boxes[] = array(
        'id' => 'mb-for-post-111',
        (...)
    );  
} else {
    $meta_boxes[] = array(
        'id' => 'mb-for-other-posts',
        (...)
    );  
}

ALSO: I do erradicate anything related to GutenBerg on my themes. Using the plagued new editor is absolutely no option for me. I run this code to remove it:

// Begone, GutenBerg!
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// Don't load GutenBerg-related stylesheets.
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );
function remove_block_css() {
    wp_dequeue_style( 'wp-block-library' ); // WordPress core
    wp_dequeue_style( 'wp-block-library-theme' ); // WordPress core
    wp_dequeue_style( 'wc-block-style' ); // WooCommerce
    wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Storefront theme
}

I will try in a matter of minutes your new JS including the metabox on a standard way (yet on my theme) and also on a regular clean WordPress install, with the default theme.

See you soon.
Thanks so far.

Ouch.

I think I found out the problem.

I have a snippet of code in my functions to FORCE REMOVE of EMPTY <p>'s. It seems this is what is causing me trouble. If so ----> YES, your current new WYSIWYG.JS is fixing the problem.

function remove_empty_p( $content ){
    // clean up p tags around block elements
    $content = preg_replace( array(
        '#<p>\s*<(div|aside|section|article|header|footer)#',
        '#</(div|aside|section|article|header|footer)>\s*</p>#',
        '#</(div|aside|section|article|header|footer)>\s*<br ?/?>#',
        '#<(div|aside|section|article|header|footer)(.*?)>\s*</p>#',
        '#<p>\s*</(div|aside|section|article|header|footer)#',
    ), array(
        '<$1',
        '</$1>',
        '</$1>',
        '<$1$2>',
        '</$1',
    ), $content );

    return preg_replace('#<p>(\s|&nbsp;)*+(<br\s*/*>)*(\s|&nbsp;)*</p>#i', '', $content);
}       
add_filter( 'the_content', 'remove_empty_p', 20, 1 );

I will test a bit more and will return soon.
Need to leave the house for a moment.

Update:

I tried including the WYSIWYG metabox in my theme using both ways, the regular method and with a IF/ELSE/$post_id condition (as mentioned above):

— Removed my custom snippet for blank <p>'s, it was not it the culprit, problem still there
— Emptied the cache, nothing
— When screen reloads, after saving, I see the visual editor on the VISUAL tab for a millisecond, then it disappears, like if it was a refresh applied on the element

So, tried to inspect the new WYSISYG.JS file you shared this morning and solved my problem by commenting/removing the following:

// Force re-render editors. Use setTimeOut to run after all other code. Bug occurs in WP 5.6.
$( function() {
    setTimeout( function() {
        $( '.rwmb-wysiwyg' ).each( transform );
    }, 0 );
} );

But of course, this is not a ideal solution.
I tried also changing the number param of the setTimeout function... Anything higher than 12, 13, solves the problem. Putting like 20 or even 999 works too.

But again, not ideal.
Oh my...
=(

IN TIME: No JS errors show up in the console.

Hi Gunvor, I'll fix your bug tomorrow. I don't think it's hard. Please wait.