ace-editor 相关问题

我正在尝试根据本指南为 WordPress 制作一个语法高亮与 ACF + ACE 编辑器相结合的语法突出显示。我已经这样做了：我正在尝试根据本指南为WordPress制作一个结合ACF + ACE编辑器的语法荧光笔。我已经这样做了： <?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(); ?> 此代码创建一个文本区域，我可以从 HTML、CSS、JS 或 PHP 代码中进行选择。如何添加正确的 ACE JS 脚本以在 WP 管理区域内加载以及如何在前端正确渲染？看来（只是猜测，我对这些不熟悉）您已经在以下几行中为 acf-input-ace_code_editor 和 js 使用了 css 相同的处理程序两次来注册 js 和 css 文件（js 处理程序正在被覆盖） 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'] ); 然后你已经使用了 wp_enqueue_script(array( 'acf-input-ace_code_editor', )); // styles wp_enqueue_style(array( 'acf-input-ace_code_editor', )); 在这种情况下，您应该在注册文件时为 js 和 css 使用不同的处理程序，例如 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'] ); 然后使用 wp_enqueue_script(array( 'acf-input-ace_code_editor_js', )); // styles wp_enqueue_style(array( 'acf-input-ace_code_editor_css', )); 如果注册时给定的路径正确，希望这能正确地将脚本排入队列，并确保给定路径上有正确的js文件。

php wordpress plugins ace-editor syntaxhighlighter

回答 1 投票 0

Ace 编辑器在 Laravel 项目中不起作用

我在 Laravel 项目中使用 Ace 编辑器，但它只是白色和空的，而我在 codepen -> 这个 PEN 中使用相同的代码和 cdn，它工作正常 JS： <p>我在 Laravel 项目中使用 <a href="https://ace.c9.io/" rel="nofollow noreferrer">Ace 编辑器</a>，但它只是白色和空的，而我在 codepen 中使用相同的代码和 cdn -> 这个 <a href="https://codepen.io/armanshojaei/pen/aPwoGG?editors=1010" rel="nofollow noreferrer">PEN</a> 并且工作正常</p> <p>JS：</p> <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"></script> var aceCodeEditor = ace.edit("codeEditor"); aceCodeEditor.setTheme("ace/theme/dracula"); aceCodeEditor.session.setMode("ace/mode/javascript"); aceCodeEditor.setValue(`console.log('hello world')`); </code></pre> <p>HTML：</p> <pre><code><div id="codeEditor" class="codeEditor"></div> </code></pre> </question> <answer tick="false" vote="0"> <p>只需用标签包裹您的代码即可；</p> <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"></script> <script> var aceCodeEditor = ace.edit("codeEditor"); aceCodeEditor.setTheme("ace/theme/dracula"); aceCodeEditor.session.setMode("ace/mode/javascript"); aceCodeEditor.setValue(`console.log('hello world')`); </script> </code></pre> <p>确保这些脚本不在另一个脚本中</p> </answer> </body></html>

javascript ace-editor

回答 0 投票 0

Ace 编辑器等宽字体存在光标间距问题

我在 ace 编辑器中发现了一些光标间距不正确的问题。问题与字体间距有关，显然解决方案是仅使用等宽字体。这是一个...

css twitter-bootstrap fonts ace-editor monospace

回答 2 投票 0

ACE 编辑器多行正则表达式

我正在使用 ACE 编辑器来语法突出显示我网站的 BBCode 系统，总的来说，它运行良好。唯一不存在的是我们的多行注释： [贵族代码] 我是一个德...

javascript regex ace-editor

回答 2 投票 0

错误：函数组件不能有字符串引用。我们建议使用 useRef() 代替

我在我的 React 应用程序中使用 ace Editor 并收到上述错误。我想将我在 React 应用程序中使用的 Ace Editor IDE 的内容从通过 ... 触发的函数调用中放入