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?
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.