wp_enqueue_code_editor() │ WP 4.9.0

Enqueue assets needed by the code editor for the given settings.

Uses: wp_enqueue_script(), wp_enqueue_style()

Hooks from the function

wp_enqueue_code_editor

Returns

Array|false. Settings for the enqueued code editor, or false if the editor was not enqueued.

Usage

wp_enqueue_code_editor( $args );

$args(array) (required)

Args.

type(string)
The MIME type of the file to be edited.
file(string)
Filename to be edited. Extension is used to sniff the type. Can be supplied as alternative to $type param.
theme(WP_Theme)
Theme being edited when on the theme file editor.
plugin(string)
Plugin being edited when on the plugin file editor.
codemirror(array)
Additional CodeMirror setting overrides.
csslint(array)
CSSLint rule overrides.
jshint(array)
JSHint rule overrides.
htmlhint(array)
HTMLHint rule overrides.

Examples

#1 Example of creating a code editor for textarea

To do this, let's turn the Biography field on the profile edit page into an HTML code editor.

To get a better idea of what the code does, let's look at the HTML code of the textarea, which will eventually become a code editor:

<textarea id="description" name="description" rows="5" cols="30"></textarea>

add_action( 'admin_enqueue_scripts', function() {

	if ( 'profile' !== get_current_screen()->id ) {
		return;
	}

	// connect the code editor for HTML.
	$settings = wp_enqueue_code_editor( array( 'type' => 'text/html' ) );

	// do nothing if CodeMirror is disabled.
	if ( false === $settings ) {
		return;
	}

	// initialization
	wp_add_inline_script( 
		'code-editor',
		sprintf( 'jQuery( function() { wp.codeEditor.initialize( "description", %s ); } );', wp_json_encode( $settings ) )  
	);

} );

The result is:

The variable $settings contains such an array:

Array
(
	[codemirror] => Array
		(
			[indentUnit] => 4
			[indentWithTabs] => 1
			[inputStyle] => contenteditable
			[lineNumbers] => 1
			[lineWrapping] => 1
			[styleActiveLine] => 1
			[continueComments] => 1
			[extraKeys] => Array
				(
					[Ctrl-Space] => autocomplete
					[Ctrl-/] => toggleComment
					[Cmd-/] => toggleComment
					[Alt-F] => findPersistent
					[Ctrl-F] => findPersistent
					[Cmd-F] => findPersistent
				)

			[direction] => ltr
			[gutters] => Array
				(
					[0] => CodeMirror-lint-markers
				)

			[mode] => css
			[lint] => 1
			[autoCloseBrackets] => 1
			[matchBrackets] => 1
		)

	[csslint] => Array
		(
			[errors] => 1
			[box-model] => 1
			[display-property-grouping] => 1
			[duplicate-properties] => 1
			[known-properties] => 1
			[outline-none] => 1
		)

	[jshint] => Array
		(
			[boss] => 1
			[curly] => 1
			[eqeqeq] => 1
			[eqnull] => 1
			[es3] => 1
			[expr] => 1
			[immed] => 1
			[noarg] => 1
			[nonbsp] => 1
			[onevar] => 1
			[quotmark] => single
			[trailing] => 1
			[undef] => 1
			[unused] => 1
			[browser] => 1
			[globals] => Array
				(
					[_] => 
					[Backbone] => 
					[jQuery] => 
					[JSON] => 
					[wp] => 
				)

		)

	[htmlhint] => Array
		(
			[tagname-lowercase] => 1
			[attr-lowercase] => 1
			[attr-value-double-quotes] => 
			[doctype-first] => 
			[tag-pair] => 1
			[spec-char-escape] => 1
			[id-unique] => 1
			[src-not-empty] => 1
			[attr-no-duplication] => 1
			[alt-require] => 1
			[space-tab-mixed-disabled] => tab
			[attr-unsafe-chars] => 1
		)

)

Notes

Changelog

Since 4.9.0

Introduced.

`wp_enqueue_code_editor() wp enqueue code editor` code ^{WP 6.8.1}

wp-includes/general-template.php

function wp_enqueue_code_editor( $args ) {
	if ( is_user_logged_in() && 'false' === wp_get_current_user()->syntax_highlighting ) {
		return false;
	}

	$settings = wp_get_code_editor_settings( $args );

	if ( empty( $settings ) || empty( $settings['codemirror'] ) ) {
		return false;
	}

	wp_enqueue_script( 'code-editor' );
	wp_enqueue_style( 'code-editor' );

	if ( isset( $settings['codemirror']['mode'] ) ) {
		$mode = $settings['codemirror']['mode'];
		if ( is_string( $mode ) ) {
			$mode = array(
				'name' => $mode,
			);
		}

		if ( ! empty( $settings['codemirror']['lint'] ) ) {
			switch ( $mode['name'] ) {
				case 'css':
				case 'text/css':
				case 'text/x-scss':
				case 'text/x-less':
					wp_enqueue_script( 'csslint' );
					break;
				case 'htmlmixed':
				case 'text/html':
				case 'php':
				case 'application/x-httpd-php':
				case 'text/x-php':
					wp_enqueue_script( 'htmlhint' );
					wp_enqueue_script( 'csslint' );
					wp_enqueue_script( 'jshint' );
					if ( ! current_user_can( 'unfiltered_html' ) ) {
						wp_enqueue_script( 'htmlhint-kses' );
					}
					break;
				case 'javascript':
				case 'application/ecmascript':
				case 'application/json':
				case 'application/javascript':
				case 'application/ld+json':
				case 'text/typescript':
				case 'application/typescript':
					wp_enqueue_script( 'jshint' );
					wp_enqueue_script( 'jsonlint' );
					break;
			}
		}
	}

	wp_add_inline_script( 'code-editor', sprintf( 'jQuery.extend( wp.codeEditor.defaultSettings, %s );', wp_json_encode( $settings ) ) );

	/**
	 * Fires when scripts and styles are enqueued for the code editor.
	 *
	 * @since 4.9.0
	 *
	 * @param array $settings Settings for the enqueued code editor.
	 */
	do_action( 'wp_enqueue_code_editor', $settings );

	return $settings;
}