Wordpress + Advanced Custom Fields + ACE Editor Plugin -
i'm trying syntax highlighter combined acf + ace editor wordpress based on this guide.
i've done this:
<?php class acf_field_ace_code_editor extends acf_field { // vars var $settings, // hold info such dir / path $defaults; // hold default field options /* * __construct * * set name / label needed 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 merge field. // makes life easy when creating field options don't need use if( isset('') ) logic. eg: 'ace_code_editor_type' => 'ace_html', 'ace_code_editor_theme' => 'theme_chrome' ); // 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 options field. rendered when editing field. * value of $field['name'] can used (like bellow) save data $field * * @type action * @since 3.6 * @date 23/01/13 * * @param $field - array holding field's data */ function create_options( $field ) { // defaults $field = array_merge($defaults, $field); // key needed in field names correctly save 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 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 favorite theme 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 html interface field * * @param $field - array holding 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'] alter 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() * * action called in admin_enqueue_scripts action on edit screen field created. * use action add css + javascript assist 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: function can 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() * * action called in admin_head action on edit screen field created. * use action add css , javascript assist 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: function can removed if not used } /* * field_group_admin_enqueue_scripts() * * action called in admin_enqueue_scripts action on edit screen field edited. * use action add css + javascript assist 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: function can removed if not used } /* * field_group_admin_head() * * action called in admin_head action on edit screen field edited. * use action add css , javascript assist 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: function can removed if not used } /* * load_value() * * filter appied $value after loaded db * * @type filter * @since 3.6 * @date 23/01/13 * * @param $value - value found in database * @param $post_id - $post_id value loaded * @param $field - field array holding field options * * @return $value - value saved in te database */ function load_value( $value, $post_id, $field ) { // note: function can removed if not used return $value; } /* * update_value() * * filter appied $value before updated in db * * @type filter * @since 3.6 * @date 23/01/13 * * @param $value - value saved in database * @param $post_id - $post_id of value saved * @param $field - field array holding field options * * @return $value - modified value */ function update_value( $value, $post_id, $field ) { // note: function can removed if not used return $value; } /* * format_value() * * filter appied $value after loaded db , before passed create_field action * * @type filter * @since 3.6 * @date 23/01/13 * * @param $value - value loaded database * @param $post_id - $post_id value loaded * @param $field - field array holding field options * * @return $value - modified value */ function format_value( $value, $post_id, $field ) { // defaults? /* $field = array_merge($this->defaults, $field); */ // perhaps use $field['preview_size'] alter $value? // note: function can removed if not used return $value; } /* * format_value_for_api() * * filter appied $value after loaded db , before passed api functions such the_field * * @type filter * @since 3.6 * @date 23/01/13 * * @param $value - value loaded database * @param $post_id - $post_id value loaded * @param $field - field array holding field options * * @return $value - 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: function can removed if not used return $value; } /* * load_field() * * filter appied $field after loaded database * * @type filter * @since 3.6 * @date 23/01/13 * * @param $field - field array holding field options * * @return $field - field array holding field options */ function load_field( $field ) { // note: function can removed if not used return $field; } /* * update_field() * * filter appied $field before saved database * * @type filter * @since 3.6 * @date 23/01/13 * * @param $field - field array holding field options * @param $post_id - field group id (post_type = acf) * * @return $field - modified field */ function update_field( $field, $post_id ) { // note: function can removed if not used return $field; } } // create field new acf_field_ace_code_editor(); ?> this code creates textarea , can select html, css, js or php code.
how can add correct ace js script load inside wp-admin area , how render correctly in frontend?
it seems (just guess, i'm not familiar these) have used acf-input-ace_code_editor same handler twice js , css register js , css files in following lines (js handler 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 have used
wp_enqueue_script(array( 'acf-input-ace_code_editor', )); // styles wp_enqueue_style(array( 'acf-input-ace_code_editor', )); in case, should use different handlers js , 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 use
wp_enqueue_script(array( 'acf-input-ace_code_editor_js', )); // styles wp_enqueue_style(array( 'acf-input-ace_code_editor_css', )); hope enqueue script if given path right when registering , make sure correct js file available @ given path.
Comments
Post a Comment