wp_enqueue_code_editor()
Підключає все необхідне (скрипти, стилі, налаштування, мови) для використання вбудованого у WordPress редактора коду.
Для редагування коду в полі textarea використовується бібліотека CodeMirror з версії WP 4.9.
Що виконує функція?
Функція ставить на чергу підключення такі базові скрипти і стилі WP:
wp_enqueue_script( 'code-editor'); wp_enqueue_style( 'code-editor');
Далі, на основі зазначеного або визначився тип коду, який буде використовуватися в textarea , може підключити додаткові скрипти lint/hint, потрібні CodeMirror. Наприклад, при типі HTML ці доповнення будуть автозакривати теги, виводити підказки і т.д.
wp_enqueue_script( 'htmlhint' ); wp_enqueue_script( 'csslint' ); wp_enqueue_script( 'jshint' );
Далі, на основі переданих функцій параметрів, збирає параметри для CodeMirror та замінює/доповнює дефолтні параметри: wp.codeEditor.defaultSettings .
Фільтр wp_code_editor_settings
Плагіни можуть відфільтрувати параметри CodeMirror, перш ніж вони будуть об’єднані з дефолтними, через фільтр wp_code_editor_settings .
Якщо фільтр поверне false , то функція не підключить жодних скриптів.
Вимкнення підсвічування
Якщо в опціях поточного користувача підсвічування синтаксису відключено, то функція нічого не робитиме і перерве свою роботу на самому початку:
Глобальна змінна wp.codeEditor
При підключенні скрипту CodeMirror, в JS не реєструється глобальна змінна, щоб не було конфлікту, якщо якийсь плагін використовує свою версію цієї бібліотеки. Примірник об’єкта CodeMirror знаходиться у змінній wp.codeEditor . Тобто. можна написати так: window.CodeMirror = wp.CodeMirror .
Метод initialize() – wp.codeEditor.initialize( id, options ) – це аналог CodeMirror.fromTextArea() . Першим аргументом він приймає id або об’єкт елемента текстовоїобласті, а другим опції для CodeMirror. Такі опції повертає ця функція лише у вигляді PHP масиву.
Також, в опціях для методу initialize() можна вказати додаткові callback функції: onChangeLintingErrors, onUpdateErrorNotice, onTabPrevious, onTabNext. Ці коллбеки дозволяють керувати відображенням блоків з lint помилками та навігацією з клавіатури (для підказок).
Хуки з функції
Повертає
Массив|false. Масив налаштувань для CodeMirror у PHP форматі.
Використання
$settings = wp_enqueue_code_editor( $args );
-
$args
(масив) (обов’язковий) Параметри.
type (рядок)
MIME – тип файлу, який збираємося редагувати. Наприклад:text/html, говорить про те, що в полі редагування буде написано HTML код. Можливі типи:type мова text/html html xml xml application/javascript javascript json json application/x-httpd-php php text/x-sql sql text/css css text/x-scss scss text/x-less less text/x-sass sass text/nginx nginx text/x-markdown markdown text/x-gfm gfm jsx jsx text/x-diff diff file (рядок)
Альтернатива параметру $type . Назва файлу, наприклад file.php . Використовується, щоб визначити тип ($type) для розширення файлу.codemirror (масив)
Дозволяє безпосередньо вказати параметри для CodeMirror. Перепише поточні. Масив має таку ж структуру, як ми передавали параметри CodeMirror в JS. Див. документацію .csslint (масив)
Дозволяє безпосередньо вказати параметри для CSSLint. Перепише поточні.jshint (масив)
Дозволяє безпосередньо вказати параметри для JSHint. Перепише поточні.htmlhint (масив)
Дозволяє безпосередньо вказати параметри для HTMLHint. Перепише поточні.theme (WP_Theme)
Тема, яка редагується. Для сторінки редагування файлів теми.- plugin (рядок)
Плагін який редагується. Для сторінки редагування файлів плагіна.
Приклади
#1 Приклад створення редактора коду для тексту
Для цього, давайте перетворимо поле Біографія на сторінці редагування профілю на редактор HTML коду.
Щоб краще розуміти що робить код, подивимося на HTML код textarea, який у результаті перетвориться на редактор коду:
<textarea id="description" name="description" rows="5" cols="30"></textarea>
add_action( 'admin_enqueue_scripts', function() {
if ( 'profile' !== get_current_screen()->id ) {
return;
}
// Підключаємо редактор коду для HTML.
$settings = wp_enqueue_code_editor( array( 'type' => 'text/html' ) );
// нічого не робимо, якщо CodeMirror вимкнений.
if ( false === $settings ) {
return;
}
// ініціалізація
wp_add_inline_script(
'code-editor',
sprintf( 'jQuery( function() { wp.codeEditor.initialize( "description", %s ); } );', wp_json_encode( $settings ) )
);
} );В результаті отримаємо:
Змінна $settings містить такий масив:
#2 Виведення редактора css коду з оновленням textarea
У цьому прикладі показано як зібрати стилі редактора JS без передачі їх з PHP. А також показано як при будь-якій зміні коду оновлювати значення тексту регіону і запускати подію change.
add_action( 'admin_enqueue_scripts', function() {
if ( 'toplevel_page_custom_css' !== get_current_screen()->id ) {
return;
}
// Підключаємо редактор коду для HTML.
$settings = wp_enqueue_code_editor( [ 'type' => 'text/css' ] );
// CodeMirror вимкнено.
if ( false === $settings ) {
return;
}
// ініціалізація
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',
} )
console.log( settings.codemirror )
const editor = wp.codeEditor.initialize(textarea, settings)
document.querySelector( '.CodeMirror-code' ).addEventListener( 'keyup', ev => {
editor.codemirror.save()
jQuery(textarea).trigger('change')
} )
} )
JS,
);
} );
JS функція wp.codeEditor.initialize(textarea, settings)
Знаходиться у файлі wp-admin/js/code-editor.js
Параметри:
-
textarea
(string|jQuery|Element) (обов’язковий) - Атрибут id елемента у вигляді рядка, jquery елемент або DOM елемент поля textarea, для якого буде використано редактор.
-
settings
(об’єкт) (обов’язковий) JS об’єкт налаштувань для codeMirror. Його як PHP масиву повертає ця функція: wp_enqueue_code_editor() .
Що можна вказати в об’єкті:
- settings.onChangeLintingErrors (Function) – Зворотний виклик при зміні помилок компонування.
- settings.onUpdateErrorNotice (Function) – Зворотний дзвінок для відображення повідомлення про помилку.
- settings.onTabPrevious (Function) – Зворотний дзвінок для обробки натискання на TAB до попереднього елемента.
- settings.onTabNext (Function) – Зворотний дзвінок для обробки натискання на TAB до наступного елемента.
- settings.codemirror (object) – Опції CodeMirror.
- settings.csslint (object) – Правила CSSLint.
- settings.htmlhint (object) – Правила HTMLHint.
- settings.jshint (object) – Правила JSHint.
Виглядає так:
нотатки
- Дивіться: wp_enqueue_editor()
- Дивіться: wp_get_code_editor_settings() ;
- Дивіться: _WP_Editors::parse_settings()
список змін
| З версії 4.9.0 | Введено. |