"Move content editor to here" Field Type

• charles9

• July 29, 2016 at 2:01 pm

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.

• James

• July 29, 2016 at 3:26 pm

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 🙂

• charles9

• July 30, 2016 at 5:31 am

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.

• James

• July 30, 2016 at 10:36 am

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 🙂

• charles9

• July 30, 2016 at 10:56 am

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.

• James

• July 30, 2016 at 11:39 am

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 🙂

• charles9

• July 30, 2016 at 5:02 pm

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