Visual editor breaks when applying post-category rule + moving the editor

• ituk

• August 26, 2016 at 11:47 pm

Hey everyone,

I have set a rule to show a certain field group in posts from a certain category (category-1), and also added a bit of jQuery in order to move the main editor into this group (as explained here). At first look everything seemed to be okay, but then I realized the visual-editor stopped working. There is no text cursor when hovering above the visual editor, and it’s impossible to write anything in.
This happens only in new posts when the editor is empty, if I save the post with some text (using the non-visual editor) and reload the page everything seems to be working.

here is my jquery:

jQuery(document).ready(function() {
	if( jQuery("#in-category-1").is(':checked') ){
		jQuery("#postdivrich").appendTo(".acf-field-57bc88444d651");
	}
	else{
		jQuery("#acf-group_57bc87aa02bb7").addClass("acf-hidden");
	}
});

jQuery(document).on("change", "#in-category-1", function(){
	if( jQuery("#in-category-1").is(':checked') ){
		jQuery("#postdivrich").appendTo(".acf-field-57bc88444d651");
	}else{
		jQuery('#postdivrich').appendTo( jQuery('#post-body-content') );
	}
});

called from function.php with:

function itamar_add_admin_scripts( $hook ) {
	wp_enqueue_script( 'new-post-changes', get_bloginfo('template_directory').'/js/new-post-changes.js' );
}
add_action('acf/input/admin_head','itamar_add_admin_scripts',10,1);

Any Ideas?
Thanks, Itamar

• ituk

• September 8, 2016 at 5:17 pm

^^
here is a video explaining the problem.

.

• James

• September 9, 2016 at 4:15 pm

Hi @ituk

It seems the document selector is the one that causes the issue. Could you please try to add the following code to your functions.php file?

add_action('acf/input/admin_head', 'my_acf_move_content_editor');

function my_acf_move_content_editor() {
    
    ?>
    <script type="text/javascript">
    (function($) {
        
        $(document).ready(function(){
            
            
            if( $("#in-category-1").is(':checked') ){
                $('.acf-field-57bc88444d651 .acf-input').append( $('#postdivrich') );
            }
            
            $('#in-category-1').on("change", function(){
                if( $(this).is(':checked') ){
                    $('.acf-field-57bc88444d651 .acf-input').append( $('#postdivrich') );
                } else {
                    $('#post-body-content').append( $('#postdivrich') );
                }
            });
            
        });
        
    })(jQuery);    
    </script>
    <style type="text/css">
        .acf-field #wp-content-editor-tools {
            background: transparent;
            padding-top: 0;
        }
    </style>
    <?php    
    
}

I hope this helps 🙂

• ituk

• September 23, 2016 at 9:03 pm

for those who have the same problem. thanks to James, here is the full solution:

    (function($) {
        
        $(document).ready(function(){
			
			$("#tagsdiv-knowlendge").appendTo(".acf-field-57bc8db4167d8");
			$("#tagsdiv-tools").appendTo(".acf-field-57bc8dcc167d9");
			$("#tagsdiv-materials").appendTo(".acf-field-57bc8de1167da");
			$("#aboutcontent").append("<div class='clear' style='height:8px;'></div>");    

            if( $("#in-category-1").is(':checked') ){
                $('.acf-field-57bc88444d651 .acf-input').append( $('#postdivrich') );
            }
			else{
				$("#acf-group_57bc87aa02bb7").addClass("acf-hidden");
			}
            
            $('#in-category-1').on("change", function(){
                if( $(this).is(':checked') ){
                    $('.acf-field-57bc88444d651 .acf-input').append( $('#postdivrich') );
                    tinymce.EditorManager.execCommand('mceRemoveEditor',true, "content");
                    tinymce.EditorManager.execCommand('mceAddEditor',true, "content");
                } else {
                    $('#post-body-content').append( $('#postdivrich') );
                    tinymce.EditorManager.execCommand('mceRemoveEditor',true, "content");
                    tinymce.EditorManager.execCommand('mceAddEditor',true, "content");
					$("#acf-group_57bc87aa02bb7").addClass("acf-hidden");
                }
            });
			        
        });
        
    })(jQuery);