Wordpress + Advanced Custom Fields + ACE Editor Plugin

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?

Answers


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.


Need Your Help

How is it possible to call a locally defined function from its symbol?

common-lisp

According to the CLHS, FUNCALL argument is a function designator, which can be a symbol denoting a function defined in the global environment. I am looking for a way to do this locally, like in this

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.