Функция wp_enqueue_code_editor() в WordPress с примерами

Функция wp_enqueue_code_editor() в WordPress подключает необходимые скрипты, стили и настройки для использования встроенного редактора кода на базе библиотеки CodeMirror. Этот редактор поддерживает различные языки программирования и подсветку синтаксиса. Редактор начал поддерживаться с версии WordPress 4.9 и может использоваться на страницах редактирования темы, плагина или для любых полей <textarea>.

wp_enqueue_code_editor( array $args ): array|false

Параметры

• $args (array) (обязательный) — Массив аргументов для настройки редактора.
  • type (string) — MIME тип редактируемого файла (например, text/html, application/javascript, text/css).
  • file (string) — Имя файла. Используется для определения типа по расширению.
  • theme (WP_Theme) — Тема, которая редактируется (если используется редактор файлов темы).
  • plugin (string) — Плагин, который редактируется (если используется редактор файлов плагина).
  • codemirror (array) — Переопределение настроек CodeMirror.
  • csslint (array) — Правила CSSLint для валидации CSS-кода.
  • jshint (array) — Правила JSHint для валидации JavaScript-кода.
  • htmlhint (array) — Правила HTMLHint для валидации HTML-кода.

Возвращаемое значение

• Массив — Настройки для CodeMirror, либо false, если редактор не был подключен.

Пример 1: Редактор кода для поля <textarea> в настройках

Этот пример показывает, как подключить редактор HTML-кода для поля <textarea> на странице настроек.

function code_editor_enqueue_scripts() {
    if ( 'my_settings_page' !== get_current_screen()->id ) {
        return;
    }

    // Подключаем редактор кода для HTML.
    $settings = wp_enqueue_code_editor( array( 'type' => 'text/html' ) );

    // Проверяем, был ли редактор подключен.
    if ( false === $settings ) {
        return;
    }

    // Инициализация редактора для textarea с id "my_textarea_id".
    wp_add_inline_script(
        'code-editor',
        sprintf(
            'jQuery( function() { wp.codeEditor.initialize( "my_textarea_id", %s ); } );',
            wp_json_encode( $settings )
        )
    );
}
add_action( 'admin_enqueue_scripts', 'code_editor_enqueue_scripts' );

Пример 2: Превращение поля «Биография» на странице профиля в редактор HTML

add_action( 'admin_enqueue_scripts', function() {
    if ( 'profile' !== get_current_screen()->id ) {
        return;
    }

    // Подключаем редактор кода для HTML.
    $settings = wp_enqueue_code_editor( array( 'type' => 'text/html' ) );

    // Проверяем, был ли редактор подключен.
    if ( false === $settings ) {
        return;
    }

    // Инициализация редактора для поля с id "description".
    wp_add_inline_script(
        'code-editor',
        sprintf(
            'jQuery( function() { wp.codeEditor.initialize( "description", %s ); } );',
            wp_json_encode( $settings )
        )
    );
} );

Пример 3: Редактор CSS с обновлением содержимого textarea

Этот пример показывает, как динамически обновлять содержимое поля textarea при изменении кода в редакторе CodeMirror.

add_action( 'admin_enqueue_scripts', function() {
    if ( 'toplevel_page_custom_css' !== get_current_screen()->id ) {
        return;
    }

    // Подключаем редактор кода для CSS.
    $settings = wp_enqueue_code_editor( [ 'type' => 'text/css' ] );

    // Проверяем, был ли редактор подключен.
    if ( false === $settings ) {
        return;
    }

    // Инициализация редактора для textarea с id "textarea_css_editor".
    wp_add_inline_script(
        'code-editor',
        <<<JS
        document.addEventListener( 'DOMContentLoaded', function(){
            const textarea = document.querySelector( '#textarea_css_editor' );
            const settings = wp.codeEditor.defaultSettings ? _.clone( wp.codeEditor.defaultSettings ) : {};

            settings.codemirror = _.extend( {}, settings.codemirror, {
                indentUnit: 2,
                tabSize: 2,
                mode: 'css',
            });

            const editor = wp.codeEditor.initialize( textarea, settings );

            document.querySelector( '.CodeMirror-code' ).addEventListener( 'keyup', ev => {
                editor.codemirror.save();
                jQuery( textarea ).trigger( 'change' );
            });
        });
        JS
    );
} );

Особенности

• Поддерживаемые типы файлов: HTML, JavaScript, PHP, CSS, JSON, SCSS, LESS, XML и другие.
• Настройки Lint: Для валидации HTML, CSS и JavaScript можно использовать HTMLHint, CSSLint и JSHint соответственно.
• Фильтрация настроек: Параметры CodeMirror могут быть изменены через фильтр wp_code_editor_settings.

Заключение

Функция wp_enqueue_code_editor() является мощным инструментом для добавления функционального редактора кода в админку WordPress, обеспечивая подсветку синтаксиса и различные возможности редактирования для HTML, JavaScript, CSS и других языков.