WordPress містить два вбудовані редактори , що дозволяють редагувати код прямо через браузер - це Редактор Теми та Редактор Плагіна . За замовчуванням редактор виглядає дуже просто і з його допомогою важко редагувати, тому що кольори всі чорні і сірі. У цьому посібнику я покажу вам, як інтегрувати CodeMirror.js в редактори, щоб зробити їх симпатичнішими. Наші фрагменти коду будуть виділені великою кількістю кольорів, редактори навіть мають номери рядків, і багато чого ще.
| Завантажити вихідні джерела |
Крок 1. Підготовка
Для початку треба завантажити бібліотеку CodeMirror . Це потужна бібліотека з підтримкою багатьох мов програмування та параметрів. Після завантаження та вилучення давайте помістимо цю папку в папку з вашою темою (наприклад я використовую тему оформлення Twenty Eleven) і назвемо її codemirror.
Потім ми створимо файл під назвою codemirror.php усередині цієї папки та включимо цей файл у файл functions.php вашої теми.
// functions.php
include("codemirror/codemirror.php");
Відкрийте codemirror.php і перейдіть на наступний крок.
CodeMirror – це компонент, який покращує редактор коду у браузері. Коли для мови, якою ви програмуєте, доступний мод, він підсвічуватиме ваш код, а за бажанням допоможе форматувати з вирівнюванням.
Крок 2. Реєстрація скриптів та стилів
add_action('load-theme-editor.php', 'codemirror_register');
add_action('load-plugin-editor.php', 'codemirror_register');
function codemirror_register() {
wp_register_script('codemirror', get_template_directory_uri()."/codemirror/lib/codemirror.js");
wp_register_style('codemirror', get_template_directory_uri()."/codemirror/lib/codemirror.css");
wp_register_style('cm_blackboard', get_template_directory_uri()."/codemirror/theme/blackboard.css");
wp_register_script('cm_xml', get_template_directory_uri()."/codemirror/xml/xml.js");
wp_register_script('cm_javascript', get_template_directory_uri()."/codemirror/javascript/javascript.js");
wp_register_script('cm_css', get_template_directory_uri()."/codemirror/css/css.js");
wp_register_script('cm_php', get_template_directory_uri()."/codemirror/php/php.js");
wp_register_script('cm_clike', get_template_directory_uri()."/codemirror/clike/clike.js");
add_action('admin_enqueue_scripts', 'codemirror_enqueue_scripts');
add_action('admin_head', 'codemirror_control_js');
}
Код вище зачепить функцію codemirror_register за дві зачіпки: load-theme-editor.php та load-plugin-editor.php . Це означає, що, коли викликається Theme Editor або Plugin Editor, вони викличуть нашу функцію codemirror_register.
Бібліотека ядра
Усередині цієї функції ми зареєструємо всі потрібні файли скриптів та стилів. codemirror.js і codemirror.css — два основні компоненти бібліотеки, які знаходяться в папці lib.
Тема
blackboard.css є файл теми, папка theme в бібліотеці CodeMirror також містить багато інших файлів теми, ви можете змінити це в залежності від ваших налаштувань. Є багато доступних тем, ви можете побачити їх тут :
- дефолт:
- Дошка:
Моди
Моди - це JavaScript програми, які допомагають додавати колір (за бажанням - вирівнювання) тексту, написаного цією мовою. Їх значення – значення MIME типу, воно залежить від мови, з якою ми працюємо. Ви можете побачити всі моди у папці всередині бібліотеки. Оскільки вбудований редактор WordPress може редагувати HTML , PHP , CSS (більше тут ), то я зареєструю ці скрипти на наступних рядках функції codemirror_register . Причину, за якою я зареєстрував скрипти XML і Clike , поясню пізніше.
Після реєстрації всіх файлів скриптів нам потрібно поставити їх у чергу щоразу, коли завантажується наш блок адміністратора. Отже, я додам функцію codemirror_enqueue_scripts до зачіпки admin_enqueue_scripts . Потім ми також вставляємо файл javascript (ми можемо змінювати, додавати або видаляти скрипт налаштувань) CodeMirror в шапку зони адміністратора.
Крок 3. Додавання скриптів у чергу
function codemirror_enqueue_scripts() {
wp_enqueue_script('codemirror');
wp_enqueue_style('codemirror');
wp_enqueue_style('cm_blackboard');
wp_enqueue_script('cm_xml');
wp_enqueue_script('cm_javascript');
wp_enqueue_script('cm_css');
wp_enqueue_script('cm_php');
wp_enqueue_script('cm_clike');
}
Функцію вище особливо пояснювати не треба, вона просто додає у чергу усі скрипти, які ми зареєстрували раніше. Відкрийте Редактор Теми та перегляньте вихідний код, ви побачите, що ці скрипти вбудовані в шапку.
Крок 4. Зачіпка скрипту
приклад використання
Наш скрипт:
function codemirror_enqueue_scripts() {
?>
<script type="text/javascript">
jQuery(document).ready(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("newcontent"));
})
</script>
<?php
}
Ця функція буде вбудована в шапку блоку адміністратора, CodeMirror буде впливати на будь-який елемент, що містить ID newcontent , тому що наш елемент textarea , який містить наш код, цей ID.
При використанні CodeMirror без опцій CodeMirror буде використовувати свої налаштування за замовчуванням. Для того, щоб використовувати інші опції, ми можемо зробити, наприклад, так:
function codemirror_enqueue_scripts() {
?>
<script type="text/javascript">
jQuery(document).ready(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("newcontent"), {
lineNumbers: true,
mode: "text/javascipt",
theme: "blackboard"
});
})
</script>
<?php
}
Ці додаткові опції додадуть номери рядків у наш редактор і тему blackboard . Зверніть увагу на опцію mode , ця опція визначить, який мод CodeMirror повинен використовувати (у кроці 2 ми згадували, що таке мод). Оскільки кожен тип файлу має свій мод, нам потрібно визначити цю опцію, щоб змусити CodeMirror працювати добре і показувати все точно. Ось інші типи MIME:
- "текст/javascript" для мода JavaScript
- "текст/cssдля мода CSS
- "application/x-httpd-phpдля мода PHP , цей мод вимагає моди XML, JavasScript, CSS і C-Like. З цієї причини нам потрібно зареєструвати скрипти XML і C-Like заздалегідь.
Простий HTML/PHP мод заснований на моді C-like. Залежить від модів PHP, XML, JavaScript, CSS та C-like (див. тут )
Розширене використання
Для кращого використання нам потрібно визначити, які типи файлів ми редагуємо, щоб використовувати правильний мод. Наша мета – змусити скрипт використовувати правильний мод автоматично. Ось рішення:
function codemirror_control_js() {
if (isset($_GET['file'])) { // $_GET['file'] holds path of file we edit
$filename_to_edit = end(explode("/", $_GET['file'])); // We need to get file name
$file = substr($filename_to_edit, stripos($filename_to_edit, '.')+1); // Get file extension
switch ($file) {
// And assign appropriate MIME type value to $file variable
case "php": $file = "application/x-httpd-php"; break;
case "js" : $file = "text/javascript"; break;
case "css": $file = "text/css"; break;
}
}
else {
$file_script = $_SERVER['SCRIPT_NAME'];
$file_script = end(explode('/', $file_script));
if ($file_script == 'theme-editor.php')
$file = "text/css";
else
$file = "application/x-httpd-php";
}
?>
<script type="text/javascript">
jQuery(document).ready(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("newcontent"), {
lineNumbers: true,
mode: "<?php echo $file ;?>",
theme: "blackboard"
});
})
</script>
<?php
}
Щоразу, коли ми клацаємо файл для редагування, змінна $_GET['file] буде містити шлях до цього файлу. Наприклад:
wp-admin/theme-editor.php?file=header.php wp-admin/theme-editor.php?file=style.css wp-admin/plugin-editor.php?file=akismet.php
І цей код дозволить нам визначити розширення файлу, який ми редагуємо:
$filename_to_edit = end(explode("/", $_GET['file'])); // We need to get file name
$file = substr($filename_to_edit, stripos($filename_to_edit, '.')+1); // Get file extension
Потім, залежно від розширення, ми прикріплюємо потрібне значення типу MIME.
Якщо при першому відкритті редактора теми чи плагіна ми не клацаємо по якомусь файлу, змінної $_GET['file'] немає. WordPress відкриє файл за промовчанням для редагування автоматично. Для редактора теми файл за промовчанням style.css , в редакторі плагінів це інший PHP файл. Отже, нам потрібно визначити значення MIME типу " text/css " для редактора теми та " application/x-httpd-php " для редактора плагінів.
стилізація
Все готове, але редактор має дивний вигляд. Нам потрібно трохи відредагувати файл CSS . У папці lib ми відкриваємо файл codemirror.css , знаходимо наступний код:
.CodeMirror-scroll {
overflow-x: auto;
overflow-y: hidden;
height: 300px;
/*
This is needed to prevent an IE[67] bug where the scrolled content
is visible outside of the scrolling box.
*/
position: relative;
outline: none;
}
І замінюємо його цим:
.CodeMirror, .CodeMirror div {
margin-right: 0!important;
}
.CodeMirror-scroll {
overflow-x: auto;
overflow-y: hidden;
height: 450px;
/*
This is needed to prevent an IE[67] bug where the scrolled content
is visible outside of the scrolling box.
*/
position: relative;
outline: none;
}
Справа за вами
CodeMirror має багато можливостей, це дійсно потужна бібліотека. Прочитайте посібник з CodeMirror для того, щоб знати про всі можливості. Ви можете знайти інші можливості або варіанти їх налаштування та самостійно додати їх у код вашого WordPress. Це досить просто: зареєструйте, додайте в чергу і зачепите скрипт, як ми зробили це вище.
Висновок
У цьому посібнику я не сильно фокусувався на CodeMirror та його можливостях, я тільки продемонстрував спосіб його інтеграції до редактора, щоб зробити наш редактор симпатичнішим та зручнішим у роботі. Сподіваюся, що це керівництво буде корисним для всіх.
Якщо ви вважаєте, що з цим керівництвом є якісь проблеми, чи у вас є ідеї якнайкраще, чи є що додати — напишіть про це в коментарях. Ми будемо дуже вдячні.
Джерело: WP.tutsplus.com
Коментарі до запису: 1
Стилізація зручна, але є один істотний мінус, через який доведеться знести цей codemiror! При пошуку потрібної фрази через CTRL+F знаходить лише найближчі 2-3 рядки та підсвічує їх. А якщо потрібний рядок десь унизу коду, то пошук туди вже не доб'є і доводиться шукати ручками. Це суттєво уповільнює роботу з редактором.