Support

Account

Home Forums Feature Requests "Move content editor to here" Field Type

Solving

"Move content editor to here" Field Type

  • Rather than creating a message field and then creating jQuery code to move #postdivrich to that message field. Just create a new Field Type that does this automatically.

    Why?

    1. Its a common need that was worthy of a tutorial: https://www.advancedcustomfields.com/resources/moving-wp-elements-content-editor-within-acf-fields/

    2. When you’re creating a new page and you select the appropriate page template, the content editor doesn’t display where it should. Instead of moving that #postdivrich on page load, it needs to move on template change. If displaying that content editor in a specific position is based on some condition (like template change) — that’s when it should be appended.

  • Hi @charles9

    If you want, you can always create your own field type to do what you want. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/creating-a-new-field-type/.

    Thanks 🙂

  • I already gave it a whirl. The problem is getting the content editor to jump around each time you change the layout/template. Things have to happen when the ACF fields are lazy loaded.

  • Hi @charles9

    If you want to move it on template change, I believe you can try this code:

    add_action('acf/input/admin_head', 'my_acf_admin_head');
    
    function my_acf_admin_head() {
        
        ?>
        <script type="text/javascript">
        (function($) {
            
            $(document).ready(function(){
                
                // Do it when the page load
                if( $("select#page_template").val() == "page-template-test.php" ){
                    
                    // move to the message field
                    $('.acf-field-56d98ab4fdfde .acf-input').append( $('#postdivrich') );
                    
                } else {
                    
                    // move back to the default place
                    $('#post-body-content').append( $('#postdivrich') );
                    
                }
                
                
                // Do it when the template is changed
                $(document).on("change", "select#page_template", function(){
                    if( $("select#page_template").val() == "page-template-test.php" ){
                        $('.acf-field-56d98ab4fdfde .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    
        
    }

    If that is not what you want, could you please share some screenshots of the issue and explain it again?

    Thanks 🙂

  • The idea/spirit of this code works but, in actuality, it does not work when you first click page > add new and switch to a new template. This is because, the fields are not there as soon as you fire the .on change (it takes a second).

    When that .on change event tries to append the #postdivrich, the message placholder has not yet been lazy loaded onto the page. See what I mean?

    The trigger needs to happen _after_ the acf field group is loaded onto the page — NOT after the #page_template select changes.

    BTW, my first crack at this was almost exactly the same code you just posted. This is why I suggested making it a feature. What we really need access to is code that fires after the fields are loaded.

  • Hi @charles9

    I’m afraid I couldn’t reproduce the issue on my end. Would it be possible for you to create a screen recording of it?

    If you want the script to be executed after the fields are loaded, I believe you can change this line:

    $(document).ready(function(){

    To this one:

    acf.add_action('load', function( $el ){

    This page should give you more idea about it: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/. You can also try to use acf/input/admin_footer instead of acf/input/admin_head.

    Thanks 🙂

  • I replied with a screen recording to the support email thread. Thanks again.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.