WordPress містить два вбудований редактор, що дозволяють редагувати код прямо через браузер - це Редактор теми и Редактор Плагіна. За замовчуванням редактор виглядає дуже просто і з його допомогою важко редагувати, тому що кольори всі чорні і сірі. У цьому посібнику я покажу вам, як інтегрувати CodeMirror.js у редактори, щоб зробити їх симпатичнішими. Наші фрагменти коду будуть виділені великою кількістю кольорів, редактори навіть мають номери рядків, і багато чого ще.
| Завантажити вихідні |
Крок 1. Підготовка
Для початку треба завантажити бібліотеку CodeMirror. Це потужна бібліотека з підтримкою багатьох мов програмування та параметрів. Після завантаження та вилучення давайте помістимо цю папку в папку з вашою темою (для прикладу я використовую тему оформлення Twenty Eleven) та назвемо її код дзеркала.
Потім ми створимо файл під назвою 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 — два основні компоненти бібліотеки, які знаходяться в папці либ.
Тема
blackboard.css - Це файл теми, папка тема у бібліотеці CodeMirror також містить багато інших файлів теми, ви можете змінити це в залежності від ваших налаштувань. Є багато доступних тем, ви можете побачити їх тут:
- дефолт:
- Дошка:
моди
моди - це JavaScript програми, які допомагають додавати колір (за бажанням - вирівнювання) тексту, написаного цією мовою. Їхнє значення — значення MIME типу, воно залежить від мови, з якою ми працюємо. Ви можете побачити всі моди у папці всередині бібліотеки. Оскільки вбудований редактор WordPress може редагувати HTML, PHP, CSS (більше тут), то я зареєструю ці скрипти на наступних рядках функції codemirror_register. Причину, через яку я зареєстрував скрипти XML и Clikeя поясню пізніше.
Після реєстрації всіх файлів скриптів нам потрібно поставити їх у чергу щоразу, коли завантажується наш блок адміністратора. Так що я додам функцію codemirror_enqueue_scripts до зачіпки admin_enqueue_scripts. Потім ми також вставляємо файл керування наявність (ми можемо змінювати, додавати чи видаляти скрипт налаштувань) 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, тому що у нашого елемента текстова область, який містить наш код, цей 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
}
Ці додаткові опції додадуть номери рядків у наш редактор та у тему дошці. Зверніть увагу на опцію режимця опція визначить, який мод 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 типу "текст/css" для редактора теми та "application/x-httpd-phpдля редактора плагінів.
стилізація
Все готове, але редактор має дивний вигляд. Нам потрібно трохи відредагувати CSS файл. В папці либ ми відкриваємо файл 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 рядки та підсвічує їх. А якщо потрібний рядок десь унизу коду, то пошук туди вже не доб'є і доводиться шукати ручками. Це суттєво уповільнює роботу з редактором.