Wordpress + Advanced Custom Fields + ACE Editor Plugin

Question

I'm trying to do a syntax highlighter combined with ACF + ACE editor for WordPress based on this guide.

I've done this:

<?php

class acf_field_ace_code_editor extends acf_field
{
    // vars
    var $settings, // will hold info such as dir / path
        $defaults; // will hold default field options


    /*
    *  __construct
    *
    *  Set name / label needed for actions / filters
    *
    *  @since   3.6
    *  @date    23/01/13
    */

    function __construct()
    {
        // vars
        $this->name = 'ace_code_editor';
        $this->label = __('Ace Code Editor');
        $this->category = __("Basic",'acf'); // Basic, Content, Choice, etc
        $this->defaults = array(
            // add default here to merge into your field. 
            // This makes life easy when creating the field options as you don't need to use any if( isset('') ) logic. eg:
            'ace_code_editor_type' => 'ace_html',
            'ace_code_editor_theme' => 'theme_chrome'
        );


        // do not delete!
        parent::__construct();


        // settings
        $this->settings = array(
            'path' => apply_filters('acf/helpers/get_path', __FILE__),
            'dir' => apply_filters('acf/helpers/get_dir', __FILE__),
            'version' => '1.0.0'
        );

    }


    /*
    *  create_options()
    *
    *  Create extra options for your field. This is rendered when editing a field.
    *  The value of $field['name'] can be used (like bellow) to save extra data to the $field
    *
    *  @type    action
    *  @since   3.6
    *  @date    23/01/13
    *
    *  @param   $field  - an array holding all the field's data
    */

    function create_options( $field )
    {
        // defaults
        $field = array_merge($defaults, $field);

        // key is needed in the field names to correctly save the data
        $key = $field['name'];


        // Create Field Options HTML
        ?>
    <tr class="field_option field_option_<?php echo $this->name; ?>">
        <td class="label">
            <label><?php _e("Code",'acf'); ?></label>
            <p class="description"><?php _e("Select your language code",'acf'); ?></p>
        </td>
        <td>
            <?php

            do_action('acf/create_field', array(
                'type'      =>  'select',
                'name'      =>  'fields['.$key.'][ace_code_editor_type]',
                'value'     =>  $field['ace_code_editor_type'],
                'layout'    =>  'horizontal',
                'choices'   =>  array(
                    'ace_html' => __('HTML'),
                    'ace_css' => __('CSS'),
                    'ace_js' => __('JS'),
                    'ace_php' => __('PHP'),
                )
            ));

            ?>
        </td>
    </tr>
    <tr class="field_option field_option_<?php echo $this->name; ?>">
        <td class="label">
            <label><?php _e("Theme",'acf'); ?></label>
            <p class="description"><?php _e("Select your your favorite theme to display in frontend",'acf'); ?></p>
        </td>
        <td>
            <?php

            do_action('acf/create_field', array(
                    'type'      => 'select',
                    'name'    => 'fields['.$key.'][ace_code_editor_theme]',
                    'value'   => $field['ace_code_editor_theme'],
                    'layout'  => 'horizontal',
                    'choices' => array(
                        'theme_chrome'   => __('Chrome'),
                        'theme_dark' => __('Dark'),
                    )
                ));

            ?>
        </td>
    </tr> 
        <?php

    }


    /*
    *  create_field()
    *
    *  Create the HTML interface for your field
    *
    *  @param   $field - an array holding all the field's data
    *
    *  @type    action
    *  @since   3.6
    *  @date    23/01/13
    */

    function create_field( $field )
    {
        // defaults?
        /*
        $field = array_merge($this->defaults, $field);
        */

        // perhaps use $field['preview_size'] to alter the markup?

        $field['value'] = esc_textarea($field['value']);

        echo '<div id="' . $field['id'] . '" rows="4" class="' . $field['class'] . '" name="' . $field['name'] . '" >' . $field['value'] . '</div>';

    }


    /*
    *  input_admin_enqueue_scripts()
    *
    *  This action is called in the admin_enqueue_scripts action on the edit screen where your field is created.
    *  Use this action to add css + javascript to assist your create_field() action.
    *
    *  $info    http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
    *  @type    action
    *  @since   3.6
    *  @date    23/01/13
    */

    function input_admin_enqueue_scripts()
    {
        // Note: This function can be removed if not used


        // register acf scripts
        wp_register_script( 'acf-input-ace_code_editor', $this->settings['dir'] . 'js/input.js', array('acf-input'), $this->settings['version'] );
        wp_register_style( 'acf-input-ace_code_editor', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version'] ); 


        // scripts
        wp_enqueue_script(array(
            'acf-input-ace_code_editor',    
        ));

        // styles
        wp_enqueue_style(array(
            'acf-input-ace_code_editor',    
        ));


    }


    /*
    *  input_admin_head()
    *
    *  This action is called in the admin_head action on the edit screen where your field is created.
    *  Use this action to add css and javascript to assist your create_field() action.
    *
    *  @info    http://codex.wordpress.org/Plugin_API/Action_Reference/admin_head
    *  @type    action
    *  @since   3.6
    *  @date    23/01/13
    */

    function input_admin_head()
    {
        // Note: This function can be removed if not used
    }


    /*
    *  field_group_admin_enqueue_scripts()
    *
    *  This action is called in the admin_enqueue_scripts action on the edit screen where your field is edited.
    *  Use this action to add css + javascript to assist your create_field_options() action.
    *
    *  $info    http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
    *  @type    action
    *  @since   3.6
    *  @date    23/01/13
    */

    function field_group_admin_enqueue_scripts()
    {
        // Note: This function can be removed if not used
    }


    /*
    *  field_group_admin_head()
    *
    *  This action is called in the admin_head action on the edit screen where your field is edited.
    *  Use this action to add css and javascript to assist your create_field_options() action.
    *
    *  @info    http://codex.wordpress.org/Plugin_API/Action_Reference/admin_head
    *  @type    action
    *  @since   3.6
    *  @date    23/01/13
    */

    function field_group_admin_head()
    {
        // Note: This function can be removed if not used
    }


    /*
    *  load_value()
    *
    *  This filter is appied to the $value after it is loaded from the db
    *
    *  @type    filter
    *  @since   3.6
    *  @date    23/01/13
    *
    *  @param   $value - the value found in the database
    *  @param   $post_id - the $post_id from which the value was loaded from
    *  @param   $field - the field array holding all the field options
    *
    *  @return  $value - the value to be saved in te database
    */

    function load_value( $value, $post_id, $field )
    {
        // Note: This function can be removed if not used
        return $value;
    }


    /*
    *  update_value()
    *
    *  This filter is appied to the $value before it is updated in the db
    *
    *  @type    filter
    *  @since   3.6
    *  @date    23/01/13
    *
    *  @param   $value - the value which will be saved in the database
    *  @param   $post_id - the $post_id of which the value will be saved
    *  @param   $field - the field array holding all the field options
    *
    *  @return  $value - the modified value
    */

    function update_value( $value, $post_id, $field )
    {
        // Note: This function can be removed if not used
        return $value;
    }


    /*
    *  format_value()
    *
    *  This filter is appied to the $value after it is loaded from the db and before it is passed to the create_field action
    *
    *  @type    filter
    *  @since   3.6
    *  @date    23/01/13
    *
    *  @param   $value  - the value which was loaded from the database
    *  @param   $post_id - the $post_id from which the value was loaded
    *  @param   $field  - the field array holding all the field options
    *
    *  @return  $value  - the modified value
    */

    function format_value( $value, $post_id, $field )
    {
        // defaults?
        /*
        $field = array_merge($this->defaults, $field);
        */

        // perhaps use $field['preview_size'] to alter the $value?


        // Note: This function can be removed if not used
        return $value;
    }


    /*
    *  format_value_for_api()
    *
    *  This filter is appied to the $value after it is loaded from the db and before it is passed back to the api functions such as the_field
    *
    *  @type    filter
    *  @since   3.6
    *  @date    23/01/13
    *
    *  @param   $value  - the value which was loaded from the database
    *  @param   $post_id - the $post_id from which the value was loaded
    *  @param   $field  - the field array holding all the field options
    *
    *  @return  $value  - the modified value
    */

    function format_value_for_api( $value, $post_id, $field )
    {
        // vars
        $defaults = array(
            'ace_code_editor_type' => 'ace_html',
            'ace_code_editor_theme' => 'theme_chrome'
        );

        $field = array_merge($defaults, $field);


        // validate type
        if( !is_string($value) )
        {
            return $value;
        }


        if( $field['ace_code_editor_type'] == 'HTML' )
        {
            //$value = html_entity_decode($value);
            //$value = nl2br($value);
        }
        elseif( $field['ace_code_editor_type'] == 'CSS' )
        {
            //$value = html_entity_decode($value);
            //$value = nl2br($value);
        }
        elseif( $field['ace_code_editor_type'] == 'JS' )
        {
            //$value = html_entity_decode($value);
            //$value = nl2br($value);
        }
        elseif( $field['ace_code_editor_type'] == 'PHP' )
        {
            //$value = html_entity_decode($value);
            //$value = nl2br($value);
        }


        // Note: This function can be removed if not used
        return $value;
    }


    /*
    *  load_field()
    *
    *  This filter is appied to the $field after it is loaded from the database
    *
    *  @type    filter
    *  @since   3.6
    *  @date    23/01/13
    *
    *  @param   $field - the field array holding all the field options
    *
    *  @return  $field - the field array holding all the field options
    */

    function load_field( $field )
    {
        // Note: This function can be removed if not used
        return $field;
    }


    /*
    *  update_field()
    *
    *  This filter is appied to the $field before it is saved to the database
    *
    *  @type    filter
    *  @since   3.6
    *  @date    23/01/13
    *
    *  @param   $field - the field array holding all the field options
    *  @param   $post_id - the field group ID (post_type = acf)
    *
    *  @return  $field - the modified field
    */

    function update_field( $field, $post_id )
    {
        // Note: This function can be removed if not used
        return $field;
    }


}


// create field
new acf_field_ace_code_editor();

?>

This code creates a textarea and I can select from HTML, CSS, JS or PHP code.

How can I add the correct ACE JS script to load inside the WP-admin area and how to render correctly in the frontend?

Answer 1

It seems that (just a guess, I'm not familiar with these) you have used acf-input-ace_code_editor same handler twice for js and css to register js and css files in following lines (js handler is being overridden)

wp_register_script( 'acf-input-ace_code_editor', $this->settings['dir'] . 'js/input.js', array('acf-input'), $this->settings['version'] );
wp_register_style( 'acf-input-ace_code_editor', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version'] );

And then you have used

wp_enqueue_script(array(
    'acf-input-ace_code_editor',    
));

// styles
wp_enqueue_style(array(
    'acf-input-ace_code_editor',    
));

In this case, you should use different handlers for js and css when registering files, like

wp_register_script( 'acf-input-ace_code_editor_js', $this->settings['dir'] . 'js/input.js', array('acf-input'), $this->settings['version'] );
wp_register_style( 'acf-input-ace_code_editor_css', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version'] );

And then use

wp_enqueue_script(array(
    'acf-input-ace_code_editor_js',    
));

// styles
wp_enqueue_style(array(
    'acf-input-ace_code_editor_css',    
));

Hope this will enqueue the script properly if given path is right when registering and also make sure correct js file is available at the given path.