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 forjs
andcss
to registerjs
andcss
files in following lines (js handler is being overridden)And then you have used
In this case, you should use different handlers for
js
andcss
when registering files, likeAnd then use
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.