WP_Customize_Code_Editor_Control
概述
WP_Customize_Code_Editor_Control 是 WordPress 自定义器中的一个控件类，用于在自定义界面中集成代码编辑器。它继承自 WP_Customize_Control，专门处理代码编辑功能，支持通过 JavaScript 渲染内容。
关键要点
- 继承自 WP_Customize_Control，类型为 'code_editor'，用于在 WordPress 自定义器中添加代码编辑器控件。
- 包含属性如 code_type 和 editor_settings，用于配置编辑器类型和设置，通过 wp_enqueue_code_editor() 函数加载编辑器资源。
- 提供方法如 enqueue() 用于脚本/样式排队，json() 用于传递参数到 JavaScript，render_content() 为空以避免 PHP 渲染，content_template() 用于 JS 模板显示。
- 自 WordPress 4.9.0 版本引入，适用于需要代码编辑的自定义器场景。
Customize Code Editor Control class.
Description
See also
Methods
| Name | Description |
|---|---|
| WP_Customize_Code_Editor_Control::content_template | Render a JS template for control display. |
| WP_Customize_Code_Editor_Control::enqueue | Enqueue control related scripts/styles. |
| WP_Customize_Code_Editor_Control::json | Refresh the parameters passed to the JavaScript via JSON. |
| WP_Customize_Code_Editor_Control::render_content | Don’t render the control content from PHP, as it’s rendered via JS on load. |
Source
class WP_Customize_Code_Editor_Control extends WP_Customize_Control {/**
* Customize control type.
*
* @since 4.9.0
* @var string
*/
public $type = 'code_editor';/**
* Type of code that is being edited.
*
* @since 4.9.0
* @var string
*/
public $code_type = '';/**
* Code editor settings.
*
* @see wp_enqueue_code_editor()
* @since 4.9.0
* @var array|false
*/
public $editor_settings = array();/**
* Enqueue control related scripts/styles.
*
* @since 4.9.0
*/
public function enqueue() {
$this->editor_settings = wp_enqueue_code_editor(
array_merge(
array(
'type' => $this->code_type,
'codemirror' => array(
'indentUnit' => 2,
'tabSize' => 2,
),
),
$this->editor_settings
)
);
}/**
* Refresh the parameters passed to the JavaScript via JSON.
*
* @since 4.9.0
*
* @see WP_Customize_Control::json()
*
* @return array Array of parameters passed to the JavaScript.
*/
public function json() {
$json = parent::json();
$json['editor_settings'] = $this->editor_settings;
$json['input_attrs'] = $this->input_attrs;
return $json;
}/**
* Don't render the control content from PHP, as it's rendered via JS on load.
*
* @since 4.9.0
*/
public function render_content() {}/**
* Render a JS template for control display.
*
* @since 4.9.0
*/
public function content_template() {
?>
<# var elementIdPrefix = 'el' + String( Math.random() ); #>
<# if ( data.label ) { #>
<label for="{{ elementIdPrefix }}_editor" class="customize-control-title">
{{ data.label }}
</label>
<# } #>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<div class="customize-control-notifications-container"></div>
<textarea id="{{ elementIdPrefix }}_editor"
<# _.each( _.extend( { 'class': 'code' }, data.input_attrs ), function( value, key ) { #>
{{{ key }}}="{{ value }}"
<# }); #>
></textarea>
</pre><p class="wporg-dot-link-list"><a href="https://developer.wordpress.org/reference/files/wp-includes/customize/class-wp-customize-code-editor-control.php/">View all references</a> <a href="https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/customize/class-wp-customize-code-editor-control.php#L17">View on Trac</a> <a href="https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/customize/class-wp-customize-code-editor-control.php#L17-L111">View on GitHub</a></p></section><section class="wp-block-wporg-code-reference-related" data-nosnippet="true"><h2 id="related" class="is-toc-heading wp-block-heading has-heading-5-font-size" tabindex="-1" ><a href="#related">Related</a></h2> <section style="margin-top:var(--wp--preset--spacing--20)" class="wp-block-wporg-code-table" id="uses"><figure class="wp-block-table "><table><thead><tr><th scope="col">Uses</th><th scope="col">Description</th></tr></thead><tbody><tr class=""><td><a href="https://developer.wordpress.org/reference/classes/wp_customize_control/">WP_Customize_Control</a><code>wp-includes/class-wp-customize-control.php
Changelog
| Version | Description |
|---|---|
| 4.9.0 | Introduced. |