Правильний редактор для PHP. Найкращі PHP редактори Безкоштовна IDE – NetBeans

Здрастуйте, шановні читачі блогу сайт. Вже дуже давно хотів написати про чудовий безкоштовний редактор (посилання веде на офіційний сайт, де можна завантажити останню версію із підтримкою російської мови).

Вже протягом багатьох років він є однією з найпопулярніших програм для редагування Html, CSS і PHP коду. Навіть дивуюсь: «а як я раніше обходився без нього, реалізуючи його потенціал за допомогою інших програм?».

Зараз у мене на комп'ютері завжди одночасно запущена пара браузерів, дуже простий, безкоштовний і зручний ФТП менеджер FileZilla і цей самий редактор, можливості якого просто незрівнянні з блокнотом, що використовується в Windows за замовчуванням. Але все по порядку.

Скачування та можливості редактора Notepad ++

Встановлення програми у Windows здійснюється цілком звичайним способом. Також за бажання можете скачати Notepad ++ Portable, що представляє із себе портативну версіюцього редактора, що не потребує встановлення операційної системи.

Портабл версію можна буде отримати зі звичайної, якщо розпакувати архів з програмою в будь-яке зручне місце і запустити файл notepad.exe.

Усі плюси редактора Notepad++

Насправді вбудований у Windows блокнот відрізняється від нашого героя так само, як небо та земля. У класичному блокноті немає практично нічого, крім можливості перегляду та створення найпростіших текстових файлів (виходить щось схоже на ціпок-копалку, використовувану людьми на ранніх етапах розвитку).

Почавши користуватися Нотепадом з двома плюсами, хоча б для коригування Html і CSS файлів, ви відразу потрапите з кам'яного віку в кабіну сучасної землерийної машини. Є, звичайно ж, й інші альтернативні програми і навіть, але для новачка «блокнот із двома плюсами» буде саме те (імхо).

Так, звичайно ж, спочатку використання його може здатися хитромудрим і нетрадиційним. Але це тільки на початку знайомства, а потім вам буде так само складно обходитися без нього, як, наприклад, багато користувачів комп'ютера не мислять своє життя (теж свого роду «класика»).

Якщо порівнювати Notepad ++ з складнішими програмами, призначеними для полегшення написання та редагування різних кодів, таких, наприклад, як Dreamweaver, то і тут знайдеться чимало аргументів для використання саме нашого героя:

1. По перше, він абсолютно безкоштовний, а значить ви зможете суттєво заощадити, використовуючи його замість того ж Dreamweaver, якщо не брати до уваги зламаних версій платних програм (які цілком можуть бути розсадником троянів та інших вірусів).
2. По-друге, Нотепад набагато більше легкий та швидкий, ніж багато платних редакторів. Крім того, є можливість використовувати взагалі не встановлюючи його в операційну систему Windows (так звана портативна версія - портабл) і носити його, скажімо, . В результаті ви завжди матимете під рукою зручний, функціональний та добре зрозумілий вам інструмент для роботи з Html, PHP та кількома десятками інших різновидів коду.

Чому саме цей редактор варто завантажити?

Давайте коротко пробіжимося за його можливостями та особливостями, а потім спробуємо їх розглянути докладніше. Отже, Notepad++ вміє таке:

1. Підсвічувати кілька десятків найпопулярніших мов програмування та розмітки, наприклад, такі як: Ada, Assembler, C, C#, C++, CSS, FORTRAN, HTML, Java, JavaScript, Objective-C, Pascal, Perl, PHP, Python, Ruby, SQL , XML.

Для всіх цих мов здійснюється підсвічування синтаксису, розбиття коду на рядки та блоки, які можна згорнути натисканням на мінус та розгорнути, натиснувши на плюс. А також пунктиром можна відображати зв'язок між елементами. Наприклад, я взяв фрагмент PHP коду, щоб продемонструвати можливості цього редактора:



Якщо клацнути мишею на тезі, що відкриває Html, то він виділиться синім фоном і одночасно так само буде виділений і закривають тег, якщо такий є. Чудово допомагає знайти незакриті елементи та .

2. У ньому дуже просто здійснити зміну кодування, наприклад, на популярність , про яку я розповідав у статті, присвяченій боротьбі з кракозябрами в кодуваннях російської мови (див. її за посиланням).
   
   
3. В одному вікні програми можна буде відкривати на редагування скільки завгодно файлів, оскільки Notepad++ використовує вкладкина кшталт тих, до яких ви вже встигли звикнути у сучасних браузерах.

   

   Колір дискетки на кожній вкладці показує, чи збереглися ви останні зміни за допомогою аналогічної дискетки на панелі інструментів. На активній вкладці червона дискетка (а на неактивній - фіолетова) говорить про вашу забудькуватість.

4. За допомогою цього редактора можна вести пошук(Ctrl+F) як по відкритому в ньому документі, так і за цілим набором текстових файлів, що лежать у певній папці. Можливий пошук із заміною та з використанням регулярних виразів. Чудово зручний інструмент.
   
   
5. У налаштуваннях цього редактора можна включити автоматичне прописування тега, що закриває Html, при наборі відкриває, а також опцію автозавершення тегів.
6. Нотепад++ не тільки веде історію всіх ваших змін і дозволяє відкотитися на скільки завгодно кроків назад або повернутися вперед, але й здійснює резервне зберігання копій цих документів на зразок того, як це робить Мікрософт Ворд.
7. Цей редактор має можливість управління гарячими клавішами, яких у ньому задано безліч - з верхнього меню "Опції" - "Гарячі клавіші". Причому, при подвійному клацанні мишею по комбінації, що вас цікавить, відкриється вікно для перепризначень клавіш, що може бути зручно тим, хто на Notepad пересідає з іншого редактора.
   
   
8. Нотепад за роки свого існування обзавівся масою плагінів, деякі встановлюються з ним за замовчуванням, а інші будуть доступні для вас із верхнього меню "Плагіни" - "Plagin Manager" - "Show Plagin Manager".

   

   Для встановлення вам достатньо буде на першій вкладці поставити галочку у потрібного плагіна та натиснути кнопку «Install».

   
   

   Після цього вікно редактора перевантажиться і новий плагін буде доступний в однойменній вкладці:

   

   

9. Ще цей «швейцарський ніж» вміє підключатися до вашого сайту з ФТП, записувати та відтворювати макроси, здійснювати перевірку орфографії на льоту, проводити порівняння двох файлів у відкритих поруч вікнах та багато чого іншого.

Що вам ще може знадобитися в Нотепад ++

1. Завдяки підсвічуванням синтаксису в Notepad ++ дуже легко, наприклад, перевірити, чи закриті всі Html теги в коді, а за наявності мінімального досвіду ви вже візуально відзначатимете, що в коді у вас десь була допущена помилка, бо зміниться колірне оформлення коду у цьому місці.
2. Так само, через те, що код виділяється кольором, а звичайний текст моїх статей залишається чорним, моєму незмінному коректору граматичних помилок (улюбленої дружини) дуже зручно здійснювати перевірку граматики саме в ньому. Ні, звичайно ж, я використовую і різні, але не одні з них ще не вміє перевіряти пунктуацію, та й смислові помилки теж.
3. Ще мені в цьому текстовому редакторі дуже подобається можливість наочного відображення окремих блоків коду за допомогою підсвічування дужок виду ( ) (). Коли курсор миші знаходиться між будь-якими дужками, то вони підсвічуються, ніби виділяючи початок і кінець блоку Html або PHP коду.
4. Окрім відмінної реалізації підсвічування слід окремо відзначити можливість зробити крок назад(Скасувати попередню дію). Причому кількість кроків тому не обмежена, що дає змогу не боятися експериментувати з кодом без ризику незворотних наслідків.

   

   Скасування дії в Notepad++ можливе за допомогою гарячих клавіш Ctrl+Z (Ctrl+Y — крок вперед, тобто скасування виробленої скасування), за допомогою відповідних пунктів меню «Правка» або ж за допомогою кнопок у вигляді загнутих стрілок на панелі інструментів цього редактора.

5. Нотепад++ постійно відстежує стан відкритих в ньому документів і у разі їх зміни або видалення, наприклад, в іншій програмі, вам буде показано вікно з пропозицією закрити цю вкладку з документом або повторно підвантажити її змінену версію.
6. Як я вже раніше згадував, у блокноті з двома плюсами є можливість налаштування підсвічування синтаксису(а також десятка інших мов) під свої смаки та потреби, але я цією опцією жодного разу не користувався, бо цілком влаштовують налаштування, прийняті за умовчанням.

   

   Але вам ніхто не заважає це зробити, благо що все дуже просто - вибрати з верхнього меню пункти "Опції" - "Визначення стилів", в результаті чого відкриється вікно, де ви зможете самі тонко налаштувати шрифти та кольори для підсвічування Html, PHP або будь-якого іншої потрібної вам мови.

Також у Notepad++ є можливість автоматичного завершенняслова, що набирається, що може бути дуже зручно, якщо ви не впевнені в правильності написання того чи іншого оператора Html, PHP або будь-якого іншого коду. Для цього вам при наборі достатньо натиснути поєднання клавіш Ctrl-Пробіл і вибрати з вікна потрібний варіант:



Якщо хочете зробити автозавершення коду автоматичним, без використання гарячих клавіш, то потрібно буде вибрати з верхнього меню "Опції" - "Налаштування" і на вкладці "Резерв/Автозавершення" поставити галочку в полі "Включити для кожного введення".

7. Черговою примочкою, яка здається мені досить зручною у цьому редакторі, є можливість перетягування ярликів документів прямо у вікно програми для їх відкриття (хоча цим навряд чи можна когось здивувати) та можливість перетягуватиу самому документі виділений фрагмент коду (лівою кнопкою миші) у потрібне вам місце.
8. При роботі з Notepad ++ у вас буде можливість ставити маркери, Які в ньому обзиваються нотатками, але суть від цього не змінюється. У потрібному рядку можете поставити на лівому полі клацанням миші маркер у вигляді синьої точки.

   

   Для установки маркера (нотатки) в редакторі також можна скористатися поєднанням клавіш Ctrl-F2, а для переміщення між проставленими в документі маркерами достатньо буде послідовно натискати F2 або Shift-F2 для перегортання нотаток у зворотний бік.

9. Якщо ви працюєте в цьому редакторі з файлом Html, то можете подивитися як виглядатиме ваш код у браузері FireFox або IE шляхом вибору відповідних пунктів меню «Запуск». Якщо потрібен інший браузер, то вибираєте верхній пункт «Запуск» і відшукуєте у вікні потрібний вам екзешник.

   

10. Так само є можливість запису макросів, які мені ще не доводилося створювати, але логіка їхньої роботи досить проста. Спочатку ви записуєте його, вибравши з меню редактора пункти "Макроси" - "Старт запису", а потім вставляєте записані макроси в потрібне місце коду, вибираючи їх з меню редактора або скориставшись призначеними для них гарячими клавішами.

Кодування та робота з файлами у вікні редактора Нотепад++

1. Слід зазначити, що цей редактор коду дозволяє зберігати та перетворювати файли Html, PHP та інші у кодування UTF-8 (без BOM). Мені це не раз допомагало подолати проблему з російським кодуванням під час роботи з різними сайтами.

   Коли я хотів змінити будь-який напис на сайті на російську, то часто отримував в результаті кракозябри, причиною яких було кодування Windows-1251, в якій було збережено вихідний файл.

   Після того, як вихідний файл був перетворений на кодування UTF-8 (без BOM), кракозябри з успіхом трансформувалися у звичайні російські символи Т.ч. якщо ви додаєте кирилицю в будь-які файли движка, то для її правильного відображення на сайті потрібно буде або відразу його зберігати в правильному кодуванні, або потім перетворювати.

   Слід сказати, напевно, кілька слів про цей самий BOM. Справа в тому, що коли ви працюєте з різними текстовими об'єктами в звичайному блокноті Windows, то при збереженні його в кодуванні UTF-8 відбувається додавання невидимих ​​символів (BOM), які можуть позначитися згодом на працездатності файлу (наприклад, PHP може видавати помилку) .

2. Якщо ви захочете роздрукувати вміст відкритого файлу, то на друк буде виведений код не в тому вигляді, як ви його спостерігаєте у вікні програми. Але вибравши з меню "Опції" - "Налаштування" вкладка "Печатка"ви вільні це змінити і вибрати варіант друку підсвічування коду кольором, дозволити відображати номери рядків, колонтитули і т.п. речі:
   
   
3. У цьому просунутому текстовому редакторі також є можливість відкривати скільки завгодно багато нових документів, не побоюючись, що ви цим захламите панель завдань операційної системи. В унісон із сучасними браузерами, він відкриватиме все нові документи не в новому вікні програми, а у новій вкладцівже відчиненого вікна.

   

   Причому ці вкладки різних документів у вікні цього блокнота можна буде довільним чином перетягувати мишею, закривати та згортати.

   

   Ну, і залежно від зроблених налаштувань («Опції» — «Налаштування») всі відкриті перед закриттям Notepad ++ вкладки будуть відновлені при запуску програми (знову ж аналогічно роботі браузерів). Закривати непотрібні можна подвійним кліком або розміщувати їх вертикально.

4. Окрім звичних операцій із вкладками, у цьому редакторі можна буде відкрити в одному вікні відразу дві копії одного і того ж документа. Це може знадобитися, якщо потрібно проводити роботу з документом у різних його частинах (десь подивитися чи скопіювати, а кудись вставити).

   Для активації цього режиму вам буде достатньо клацнути правою кнопкою миші по вкладці PHP редактора і вибрати з контекстного пункт «Дублювати в Іншому вікні».

   

   Дуже зручно те, що, зберігши зміни в одній із копій документа, оновиться і друга (тобто ви не заплутаєтеся — чи зберегли ви зроблені зміни та в якій саме копії).

5. Також у ньому мені дуже подобається вбудований пошукза відкритими Html або PHP документами з можливістю заміни(Деякі активно використовують для цього регулярні висловлювання, але я до свого сорому їх не знаю). Все багатство пошуку в цьому просунутому текстовому редакторі можна оцінити просто відкривши пункт меню «Пошук». Скріншот дивіться на початку статті.

Взагалі, цей текстовий редактор дуже багато чого взяв корисного та зручного з функціоналу інших додатків, за що окремий респект його розробникам та тим, хто робить для нього плагіни, про деякі з яких зараз і йтиметься.

Використання плагінів у Notepad++

Нагадаю, що для встановлення нового плагіна вам достатньо вибрати з верхнього меню редактора «Плагіни» - « Plagin Manager» - "Show Plagin Manager".

А у вікні на першій вкладці (з верхнього меню) поставити галочку у потрібного плагіна і натиснути на кнопку «Install».

Після цього вікно редактора перевантажиться і новий плагін буде доступний в однойменній вкладці. Загалом все простіше нікуди.

Які плагіни для Нотепада вам можуть знадобитися у роботі

Дуже багато додаткових та зручних примочок надає плагін "TextFX", який після встановлення буде доступний в однойменному пункті верхнього меню редактора. Якщо у вас ще такого пункту немає, то зайдіть у "Плагіни" - "Plagin Manager" - "Show Plagin Manager", прокрутіть список у першій вкладці вниз і поставте галочку напроти TextFX Character.

Після його установки редактор перевантажиться і в меню з'явиться новий пункт TextFX з безліччю підпунктів, що випадають. Наприклад, активація показаної на малюнку опції може полегшити вам життя при редагуванні або написанні Html коду:



У цьому випадку, як тільки ви введете в текстовому редакторі Notepad++ тег, що відкриває Html, поруч з ним тут же з'явиться парний йому закриває тег. В наявності сильна економія часу і істотне зниження ймовірності помилки через незакритий тег. Однак, мене ця штука дратує, і я її не використовую. Але це анітрохи не благає її гідності.

Примочок у «TextFX» досить багато, тому спробуйте їхню роботу на практиці самі і визначтеся, що саме вам буде зручно і корисно.

Ну, і продовжуючи тему вкладок у редакторі, варто згадати ще про можливість порівняння двох документів. Спочатку цей плагін потрібно буде встановити через Plagin Manager:



Для активації режиму порівняння документів у Notepad++ вам достатньо вибрати з верхнього меню пункти «Доповнення» — «Compare» — «Compare» або натиснути Alt+D на клавіатурі. В результаті у вікні цього блокнота буде відкрита активна в даний момент вкладка, а також вкладка розташована поруч із нею.



Для зручності порівняння двох Html або PHP документів редактор Notepad ++ підсвітить для вас відмінності в них. Для переходу в звичайний режим роботи з документами потрібно у верхньому меню вибрати пункти "Додатки" - "Compare" - "Clear Results" або натиснути Ctrl + Alt + D на клавіатурі.

Причому два документи у вікні Notepad++ можна буде переглядати як у вертикальному, так і в горизонтальному вигляді. Для вибору найбільш зручного для вас способу клацніть правою кнопкою за місцем їх розділу та виберіть напрямок повороту (праворуч або ліворуч).

До речі, якщо ви, як і я, в основному використовуєте Notepad++ для редагування Html або PHP файлів свого сайту, то вам може стати в нагоді можливість підключатися до нього по FTP безпосередньо з цього текстового редактора. Мені, правда, як робота з FileZilla більше до душі, тим більше що навіть з неї у мене паролі відвести примудрилися.

Якщо ви хочете спробувати роботу по FTP через Нотепад, виберіть з верхнього меню пункти «Плагіни» - «NppFTP» - «Show NppFTP Window», в результаті чого праворуч відкриється вікно FTP клієнта.



Для налаштування підключення по FTP клацніть по іконці шестерні, виберіть «Profile Setting» та введіть дані вашого підключення. Подальша робота мало чим відрізняється від того, що я писав у статті про FileZilla, яка живе.

1. Якщо ви встановите плагін Customize Toolbar за допомогою Plagin Manager, отримаєте можливість перетасувати, видалити або додати нові кнопки на панель інструментівцієї програми.
   
   
2. На початку статті я згадував Light Explorer, який додає можливість відкриття у лівій колонці менеджера файлів. Однак для цієї ж мети можна використовувати і Explorer, який ви знайдете в менеджері плагінів.
   
3. Відмінний плагін WebEdit, що дозволяє за аналогією з Html редактором Вордпреса обрамляти текст найбільш затребуваними тегами заголовків, списків, таблиць та інших. Виділяєте потрібний фрагмент та клацаєте по одній із кнопок на панелі інструментів Notepad++.
   
4. ImgTags - дозволяє з уже прописаними горизонтальним і вертикальним розміром (сам їх обчислює, що дуже здорово), заготовленим атрибутами ALT і SRC (потрібно буде туди ще додати шлях до папки з картинками на вашому сервері).
   

Перевірка правопису вікні в Нотепад++ за допомогою плагінів

Для підключення перевірки граматики російської мовиу редакторі Notepad ++ використовується плагін Shell-Checker (з пункту меню «Плагіни»), для роботи якого потрібно завантажити словник російської мови з цієї сторінки, а при активації даного плагіна перевірки орфографії вказати шлях на вашому комп'ютері до файлу словника.



Є нюанси встановлення. Спочатку потрібно буде завантажити Full installer, а потім файл з російським словником aspell-ru-0.50-2-3.exe. Спочатку ставте повний установник, у майстрі якого, особисто я, не змінював обраний за умовчанням шлях (c: Program Files (x86) Aspel).

Потім ставте мовний пакет, де спочатку в досовском вікні доведеться вводити літеру «y» і натискати Enter на клавіатурі (хоча, можливо, це було тільки в мене, тому що я вже ставив GNU Aspell на комп'ютер до цього):



Потім вже запуститься стандартний майстер установки російського словника, де я знову ж таки не змінював умовний шлях. Усе.

Тепер перезавантажуєте Notepad ++ і або вибираєте з меню показані вище пункти, або утримуєте на клавіатурі нереальну комбінацію CTRL+ALT+SHIFT+S. У вікні ви повинні будете ввести шлях до каталогу BIN з папки Aspell:



Якщо при встановленні GNU Aspell та російського словника шлях ви не змінювали, то сюди треба буде вставити:

C:\Program Files (x86)\Aspell\bin\

Ну, або щось подібне, залежно від вашої операційної системи. Все, тепер виділяйте той текст, в якому ви хочете перевірити орфографію, і натисніть CTRL+ALT+SHIFT+S (у налаштуваннях гарячих клавіш цю комбінацію можна буде змінити — дивіться вище). З'явиться вікно, де буде відображена перша знайдена помилка:



Можна її проігнорувати, або вибрати відповідну заміну з запропонованих варіантів. Унизу можна змінити мову перевірки, якщо ви встановили кілька мовних модулів GNU Aspell. От і все.

DSpellCheck— дуже зручне рішення на зразок попереднього плагіна, бо в ньому теж використовується GNU Aspell та його російський словник, але перевірку орфографії він уже робить нальоту, так само як і у всіх сучасних браузерах. Заходьте в менеджер плагінів та встановлюєте його.



Відразу ж за замовчуванням увімкнеться перевірка граматики (відключається вона зняттям галочки показаної на скріншоті), але підключений буде модуль тільки з англійською мовою, тому ми йдемо в налаштування DSpellCheck та вносимо зміни.



Вибираємо зі списку Aspell (якщо він у вас ще не встановлений, то прокрутіть трохи вгору цю статтю і завантажте модуль разом з російським мовним пакетом, щоб встановити їх у вашу ОС), а трохи нижче вказуєте шлях до файлу aspell-15.dll. Ще трохи нижче вибираєте мову словника, що підключається, якщо ви їх ставили кілька, і тиснете на Apply.



Тепер всі знайдені помилки будуть підкреслені червоною хвилястою лінією (колір можна поміняти в налаштуваннях), а при підведенні курсора миші з'явиться стрілочка, натиснувши на яку ви зможете вибрати варіант правильного написання цього слова, або занести його до словника або ж до списку ігнорування.

Удачі вам! До швидких зустрічей на сторінках блогу сайт

Вам може бути цікаво

Як видалити порожні рядки в Notepad ++ Як зі списку URL-адрес вичленувати домени та прибрати їх повтори за допомогою Notepad++ (готовимо список для Disavow links) Як вести пошук за вмістом файлів у Total Commander
FileZilla - де безкоштовно скачати і як навчитися користуватися популярним FTP клієнтом Файлзілла
PhpMyAdmin - що це таке, де можна завантажити, як встановити, налаштувати і використовувати
Artisteer - програма для створення та редагування шаблонів для Joomla та тем для WordPress
Punto Switcher - безкоштовний перемикач розкладки клавіатури та інші можливості програми Пунто Світчер

Сучасний PHP редактор – це програма, яка обмежена лише написанням та редагуванням коду. Функціонал такого редактора може підтримувати роботу з кількома програмними мовами.

Їх існує значна кількість, серед яких неодмінно можна підібрати найкращий php редактор для користувача.

Komodo Edit

Цей редактор php коду (і не тільки php), стане дуже зручним інструментом, як для тих, хто вже знайомий з написанням кодів, так і для тих, хто тільки вникає. Працює він у операційній системі Linux. Ще кілька років тому, КЕ був одним з найпотужніших редакторів коду на Лінуксі. Komodo Editor розроблявся одночасно працівниками компанії Active State та представниками товариства. Підтримує такі скриптові мови програмування:

✒ PHP;

✒ JAVASCRIPT;

✒ Perl;

✒ Python;

✒ Ruby;

Поширюється безкоштовно і доступний для завантаження архівом з офіційного сайту. Рекомендуються до користування останні версії оновлення, але судячи з відгуків, цілком працездатний Komodo Edit починаючи з 7 версій, які цілком можна знайти в архівах і на спеціалізованих форумах. Є русифікація, яку необхідно окремо завантажувати. Русифікатор повинен відповідати версії редактора, для якої він написаний, це важливо. Відмінними особливостями КЕ будуть: підсвічування, що налаштовується, авто-доповнення коду, маса розширень, просте створення проектів, паралельна робота з файлами інших проектів і це далеко не все. Дуже гідний редактор, який рекомендується якщо не для постійного користування, хоча б для ознайомлення.

Sublime Text

Даний редактор є аналогом TextMate у мульти-платформному виконанні. Підтримує роботу на наступних ОС: Windows, Linux, OS X. Ліцензія є платною, але є можливість безкоштовного використання. Відмінностей між платною та безкоштовною версіями виявлено не було, за винятком того, що іноді вискакує вікно з пропозицією придбати ліцензію. Інтерфейс досить мінімізований, не навантажує очі зайвою інформацією та буде приємний, навіть при користуванні ним тривалий час.

Має чудову функцію, такий як множинне виділення. Перевагою також є створення та вставка сніпетів за гарячими клавішами. Власне, самі гарячі клавіші можуть бути призначені на будь-яку дію. Останнім і найвагомішим плюсом буде наявність величезної кількості плагінів, які дозволяють пристосувати редактор під свої потреби або звички.

Підтримує досить велику кількість мов програмування, але не обмежена. Знову ж таки, плагіни дозволяють вести роботу з потрібною мовою. Підсвічування синтаксису на висоті.

Редактор більше підійде для тих, хто вже розуміється на редагуванні коду.

Notepad ++

Неймовірно простий і улюблений безкоштовний php редактор. Їм користуються як маститі програмісти, так і ті, хто тільки осягає ази редагування коду. Дуже швидко дієвий і не вимагає багато ресурсів комп'ютера. Вільний доступ до Notepad ++ приніс свої плоди: плагіни повноцінно доповнять роботу редактора, а їхня випущена кількість дозволить підібрати будь-який необхідний інструмент для роботи.

Стандартна підтримка 16 мов програмування, якою вистачить для повноцінної роботи. Серед них: C, C++, HTML, PHP, TCL, Assembler, Java Script, ASCII та інші. Втім, ця кількість доповнюється плагінами. Текст підсвічується відповідно до синтаксису вибраної мови. Значною перевагою буде одночасна робота з кількома документами. Зазначена багатьма користувачами, функція «авто-завершення слова», полегшить чи підкаже правильне рішення під час написання коду.

Також, для зручності роботи є опція масштабування документа, що дозволяє бачити весь код, якщо не повністю, то значну його частину.

Atom

Ще один безкоштовний html php редактор, з підтримкою безлічі мов Atom. Плід спільної розробки компанії GitHub та спільноти open source, яка розвиває цей проект не один рік. Редактор включає вже близько сімдесяти вбудованих пакетів (плагінів), які дають можливість налаштувати середовище редагування дуже тонко, без додаткових завантажень. Робота з усіма популярними мовами програмування на платформах Linux, Windows та Mac. Має візуальний редактор PHP коду. Переваги:

✔ пошук файлу за літерами з назви;

✔ наявність пакета для авто-збереження;

✔ вибір потрібного пакета для встановлення та видалення невикористовуваних, що впливає на швидкодію процесів;

✔ автоматичне стеження за виходом оновлень пакетів;

✔ завдяки величезній кількості пакетів вдасться створити індивідуальний редактор коду;

✔ авто-доповнення слів коду на порядок продуманіше багатьох редакторів.

Напевно мій шановний читач не раз стикався з ситуацією, коли кінцевий веб-проект орієнтувався не на вузьке коло веб-програмістів або людей "введених" в систему, а виключно людей, для яких найважливішим аспектом є, безумовно, простота і практичність, а найголовніше це звичайно асоціативність та краса.

Нещодавно мені довелося розробляти проект для організації письменників України, в якій, безумовно, програмістів "дуже багато", і потрібно було шукати рішення для спрощення інтерфейсу системи, особливо це стосувалося написання статей, та іншого змісту сайту, що редагується вручну.

Я випробував безліч систем візуального редагування, і безумовно про кожну з них у мене склалося певне враження: як хороше, так і погане.

У рамках цього проекту я випробував три системи візуального редагування, які, безумовно, варті уваги, і будуть розглянуті у цій статті. Це такі програми: TinyMCE, WYM Editor, HTMLArea.

Ну звичайно в один ряд ці програми ставити не можна, хоча б за їхнім функціоналом та призначенням. Це було б рівносильно порівнювати можливості вбудованого редактора Notepad та комерційного Microsoft Word. Адже кожна ця програма особлива і належить до певного класу. Тому сьогодні ми поговоримо про неї.

Оповідь про TinyMCE

Ну, ця програма, на мою думку, займає почесний п'єдестал першості на ринку подібних продуктів, оскільки має найбільш функціональний інтерфейс, "портативність", асоціативність, і при цьому - відносною швидкістю. Але сказати це, означає не сказати абсолютно нічого, тому що цими поверхневими похвалами не можна розкрити всі її переваги, серед яких: найбільш опрацьований серед усіх перерахованих вище систем API-інтерфейс, простота і зрозумілість, досить швидкий час обробки (враховуючи рівень і якість вироблених системою дій), а також якість обробки зовнішніх даних. Наприклад, ви можете легко скопіювати текст з документа Word, і при правильному налаштуванні, система транслює його в дуже і дуже схожому форматі, при відносній чистоті коду, який відповідає стандартам, що висуває головний законодавець мод WWW - W3C. Але, безперечно, не буває меду без дьогтю, і в цьому випадку є свої мінуси. Серед них непрацездатність на браузерах Opera закінчуючи 8.4, на яких система взагалі не працюватиме. Ну і, звичайно, враховуючи всі її можливості та мультиброузерність, на виході ми отримуємо досить об'ємний вихідний код, а саме 1,9 Мбайт, але я вважаю, що розмір окупає себе сповна.

Отже, припустимо, у вас є певний документ form.html, у якому міститься певна форма, із полем TextArea. Але як його зробити WYSIWYG-типу?

Так дуже просто, для цього вам спочатку необхідно підключити основний клас TinyMCE, після чого в документі автоматично стане доступним прототип об'єкта TinyMCE, який є основним API-інтерфейсом системи, через який відбувається спілкування з програмою, і її налаштування.

Давайте розглянемо найпростіший випадок застосування програми, на прикладі документа з формою та елементом TextArea:

Лістинг 1.1

Деякий елемент TextArea

У цьому найпростішому випадку як поле для редагування ми побачимо редактор з мінімальним набором функцій стандартного форматування тексту, але не більше. Подібний підхід можна застосувати в рамках проекту створення чату, форуму, гостьової книги та іншого. Для більш складних варіантів у нас є додатковий набір функцій і методів, про які ми зараз і поговоримо.

Але поговоримо спочатку про параметри, які ми в даному випадку передаємо в метод ініціалізації класу - init().

Ми передаємо як параметр деякий хеш, в якому значення елемента mode відповідає "textareas", а елемента theme - "simple". Елемент `mode` означає метод "заміни" стандартних текстових полів (textarea) на WYSIWYG. Він може приймати значення "textareas", "exact" та "specify_textareas".

У випадку "textareas" ми даємо команду редактору перетворити всі елементи TextArea на елементи, що редагуються. В інших випадках ми маніпулюємо певними полями для редагування, ідентифікатори яких необхідно перерахувати як значення елемента elems, через кому.

У свою чергу, елемент "theme" означає ніщо інше, як поточний тип оформлення редактора і може приймати значення: "simple" і "advanced".

У нашому випадку, коли ми використовуємо тип "simple", ми підключаємо виключно стандартні функції редактора, і при цьому не може особливо змінювати його функціонал, як я вже казав - це цілком пригодиться для малих проектів, а також для тих, у яких потрібна Висока швидкість з'єднання.

Тепер давайте розглянемо роботу з редактором під час увімкненого режиму теми "advanced".

У цьому випадку ми маємо гнучкий у редагуванні інтерфейс, повне редагування всіх функцій, що використовуються редактором, а також ще кілька моментів.

Що ж, припустимо, ви розпочали проект деякого електронного журналу або Інтернет-видання, в якому важливою є можливість створення статей з боку адміністрації. При цьому слід враховувати, що інтерфейс програми повинен бути якомога схожим із звичним для нас інтерфейсом найбільш використовуваного Word"а, а також мати достатню кількість функцій для втілення всіх ідей редактора щодо форматування тексту статті, і ніколи не повинно виникати таких питань як : "А куди потрібно натиснути?", "А чому воно не показує:.", "А куди подівся весь текст":

Для рідкісного виникнення подібних питань (але ж від них нікуди не подітися:) ми зараз трохи змінимо, поточний варіант редактора і додамо наступні функції:

1. Автоматичне форматування тексту, що вставляється
2. Додамо функції форматування
3. Змінимо розташування панелей керування
4. Задамо мову редактора
5. Додамо перевірку орфографії

Що ж, давайте обговоримо точніше, що ми хочемо побачити у редакторі:

1. Панель форматування знаходиться зверху
2. Панель стану відсутня
3. Мова редактора - російська
4. Функції форматування: жирний, курсив, підкреслення, шрифт, розмір, стиль тексту, колір, заливка.
5. Функції структурного форматування: таблиця, вирівнювання, табуляція, перелік
6. Додаткові функції: вставка зображення, вставка, перегляд, вставка гіперпосилання, функції "відкату" та "повернення", ну і, напевно, введемо друк.

Що ж, формалізація завдання є, тепер давайте вирішимо, як ми це втілюватимемо в життя.

Для функції авторформата вставляемого ззовні тексту необхідно вказати параметр хеш-списку - "paste_auto_cleanup_on_paste", який приймає як значення булев (true || false), і залежно від цього форматує чи ні зовнішній текст, переданий з буфера обміну.

При використанні даного параметра слід також використовувати такі параметри:

Paste_convert_headers_to_strong: (true | false), paste_strip_class_attributes: "all", paste_remove_spans: (true | false), paste_remove_styles: (true | false)

Ну, я їх не озвучую, бо їхні назви й так асоціативні. Що ж, зі вставкою ми вирішили проблему, і тепер нам необхідно вирішити ще кілька завдань, поставлених нами раніше. Але зараз поговоримо про панелі програми, так як це досить важливо при проектуванні візуального відображення редактора.

Існує два види панелей, а саме: панель інструментів (toolbar) та панель стану (statusbar).

На першій панелі розміщуються функціональні кнопки, а також інші засоби для форматування та редагування тексту.

Кожна з цих панелей може мати своє становище (знизу або зверху), тобто у нас є можливість досить гнучко змінювати положення в редакторі. Для цього можна скористатися параметрами:

Theme_advanced_toolbar_location: (top | bottom | none), theme_advanced_statusbar_location: top | bottom | none)

При цьому залежно від значення параметра і буде встановлено кінцеве положення панелі, або якщо параметр стоїть у значенні "none", то панель взагалі не відображатиметься.

І ще, панель інструментів має такий параметр як вирівнювання, відповідно до значення якого і буде центровані елементи панелі. За центрування елементів відповідає параметр theme_advanced_toolbar_location, і може набувати стандартних значень: center, left, right (за замовчуванням встановлено параметр center).

Отже, з панелями розібралися, але на них слід додати щось?

Адже за замовчуванням він просто пустуватиме, з мінімальним набором значень, адже не потрібен такий редактор?

Для розміщення, елементи, або іншими словами - кнопки, повинні розбиватися на кілька категорій, у кожній з яких можуть бути елементи (не) розділені знаком роздільника. Для абстракції груп у програмі використовується поняття кнопок, і завдання групи як значення параметра theme_advanced_button(n+1), де n-поточний номер групи, задається набір елементів, які до неї повинні ставитися.

Хоча про набір ви можете, особливо не турбується, тому що за замовчуванням в панелі інструментів ви і так зможете знайти стандартний набір необхідних функцій вирівнювання, форматування та іншого, але це доступно лише в режимі "advanced".

Для завдання мови редактора потрібно лише додати параметр "language" зі значенням "ru".

Що ж, давайте подивимося, що вийшло у мене:

Лістинг 1.2.

Ось це і весь код. Він виглядає досить громіздко, але загалом досить простий для розуміння.

Що ж, розглянемо його анатомію. Спочатку ми передаємо найважливіші параметри, а саме: метод "заміни" текстових полів, тип теми редактора, мова редактора, а також список плагінів, що підключаються. До речі, про них. Наскільки ви помітили, якщо уважно читали, то в рамках цього тексту ми їх ще ніколи не згадували.

Плагіни - деякі зовнішні модулі, які необхідні здійснення тих чи інших функцій програми. Плагіни розміщуються в папці `plugins`, звідки підключаться до програми під час виклику. Для використання плагінів у програмі, їх спочатку необхідно перерахувати через кому, як параметри елемента `plugins`, після чого додати відповідну кнопку на панель, для їх використання.

Так само в рамках прикладу в лістингу 1.2 ми використовували плагін inserdate, для якого пізніше задали параметр dateFormat і timeFormat, які вводять формат часу і дати, що використовуються відповідно. Вони задаються відповідно до специфікації функції тимчасових міток.

Також варто згадати інші цікаві функції, використані в прикладі:

• paste_remove- при режимі true, редактор фільтрує всі дані, що надійшли з буфера обмілу, і видаляє контеїнери spaі.
• paste_convert_headers_to_strong- при режимі true, редактор змінює всі заголовки (h1, h2, h3, h4, h5, h6) у буфері обміну на елементи
• paste_auto_cleanup_on_paste- фільтр для даних із буфера обміну (застосовується до даних із MS Word)

Ось, на мою думку, для загального огляду системи вистачить. Проте ми ще не розглянули досить багато методів API-інтерфейсу, без яких часто дуже складно уявити роботу з редактором. Але обіцяю, що ми розглянемо їх у наступних випусках МК.