Support

Account

Home Forums Backend Issues (wp-admin) Visual editor breaks when applying post-category rule + moving the editor

Solved

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

  • 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

  • ^^
    here is a video explaining the problem.

  • 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 🙂

  • 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); 
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.