Найкращі PHP редактори. PHP редактори Візуальний php

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

Найкраща безкоштовна IDE - NetBeans

Отже, історія повторюється і відкриває рейтинг IDE NetBeans, а отже доведеться сказати про неї ще кілька добрих слів. По-перше, вона підтримує російську мову, що для багатьох PHP розробників життєво важливо. По-друге, NetBeans підтримує всі відомі фреймворки, у тому числі Zend, Laravel, Doctrine, CakePHP, Smarty, Yii та Symfony2. Крім того, природно підтримуються JavaScript, HTML, CSS і PHP у найсвіжіших версіях.

Найкраща платна IDE - PHPStorm

Ця IDE ідеально підійде для повноцінної full-stack веб-розробки. Також підтримує фреймворки Symfony, Zend, Yii, CakePHP, основні CMS системи Magento, Drupal, Wordpress, відладчики Zend Debugger і Xdebug, а для фронтенду вам доступні CSS3, HTML5, Sass, CoffeeScript, TypeScript, Stylus, Less і ще невелика купа. Програмне середовище поставляється безкоштовно для вчителів та студентів профільних ВНЗ, для проектів з відкритим кодом, та й для тих, кому вистачить 30 ознайомлювальних днів. В інших випадках доведеться платити.

Найдоцінніша IDE - Sublime Text

Остання третя версія Sublime Text - середовище розробки широкого профілю, основна принадність якої у величезній кількості модулів, що підключаються. Одним із них є PHP IDE. До складу входить все необхідне: налагоджувачі, тестувальники, редактор та підтримка популярних фреймворків. Працювати з Sublime Text легко та зручно.

Найпопулярніша IDE - Eclipse PDT

Ще один представник минулого рейтингу. Загалом його популярність обумовлюється обширністю можливостей (відповідно людям, які працюють іншими мовами буде зручно залишитися саме на цьому продукті), мов, що підтримуються, і кількістю пакетів, що прикріплюються. Нам цікавий PDT (PHP Development Tool) із властивими Eclipse можливостями: підсвічуванням синтаксису, помічником у написанні коду, рефакторингом, шаблонами, налагодженням, валідацією та багатьом іншим.

Найкраща хмарна IDE - Cloud 9

Cloud 9 - черговий представник всеїдного середовища розробки, що разом із якістю складання робить його популярність недосяжною для конкурентів із хмарного світу. За безкоштовно ви отримуєте обмеження у вигляді одного робочого місця, що цілком достатньо для оцінки можливостей. Захочете працювати командою – приготуйте 19 $ (або 1 символічний долар, якщо команда у вас студентська).

Найпростіша IDE - PHP Designer

Як ви розумієте, титул найпростіший IDE накладає обмеження на функціональність. В даному випадку, головний мінус – робота тільки в одній ОС, а саме Windows. Та й в іншому це швидше редактор коду з розширеннями, ніж повноцінне середовище розробки. Але ж іноді це добре, чи не так?

Найкраща з непопулярних IDE - CodeLobster

Ви не знайдете величезної спільноти розробників CodeLobster, з довідковою документацією теж все досить мізерно. Але це не скасовує того факту, що це відмінна IDE, що підтримує Drupal, Joomla, Wordpress, Yii, Symfony, Laravel, Smarty, CakePHP, Phalcon, jQuery, AngularJs, Nodejs.

Найперспективніша IDE - Zend Studio

Завершимо огляд потужним продуктом від Zend Technologies, а точніше сухою статистикою:

Налагодження за допомогою Zend Debugger, Xdebug, інтеграція із Z-Ray;

Підтримка SVN, CVS, Docker, Git Flow;

Можливість перегляду MySQL, SQLite, PostgreSQL та інших СУБД;

Підтримка бібліотеки Dojo;

Якісний редактор коду, з функціями аналізу, виправлення, рефакторингу, індикації, генерації тощо;

Підтримка хмарних сервісів Microsoft Azure та Amazon AWS;

Вільне поводження з JavaScript, CSS, HTML і звичайно PHP (4 та 5);

Панель розробника Zend Studio Toolbar для браузерів IE та Mozilla Firefox.

Розробники веб-сайтів знаходяться в постійному пошуку IDE для PHP, яка б спростила і полегшила процес розробки. Щоб знайти для себе відповідне інтегроване середовище розробки, потрібно ознайомитися з найпопулярнішими та найактуальнішими з них.

Пошук найкращої IDE для мови програмування PHP

Кожен web-розробник, щоб бути конкурентоспроможним і працювати продуктивно, має вміти написати хороший код швидко та якісно. Можливість написання коду стала фундаментальною необхідністю для більшості сегментів, що розвиваються, включаючи IoT і AI.

Досвідчені програмісти підтвердять, що правильне середовище IDE максимально важливе для створення та підтримки високої якостікоду. Важливо відповідально підходити до вибору інтегрованого середовища до роботи. Оскільки формат написання коду змінюється, а нові мови програмування з'являються часто, важливо, щоб розробники програмного забезпеченнявибрали правильну IDE для досягнення поставлених цілей та завдань.

Багато розробників задають те саме питання: яка IDE для PHP розробки найкраще підходить?

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

IDE та редактор коду: у чому різниця?

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

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

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

• Автозавершення коду;
• Вбудовані підказки;
• Виділення та закриття розділів коду.

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

Безкоштовна IDE – NetBeans

NetBeans середовище розробки для PHP, яке відкриває список найпопулярніших. Важливо відзначити, що середовище розробки безкоштовне і підтримує російську і англійська мови. Створення цього середовища було розпочато ще 1996 року, але з того часу розробники проробили велику роботу з оптимізації проекту. NetBeans IDE динамічно розвивається та постійно вдосконалюється, щоб залишатися на позиціях лідера.

Проект не був би настільки успішним, якби корпорація Oracle не спонсорувала його, але в 2016 році курування було передано фонду Apache. Розробниками на даний момент є NetBeans Community та NetBeans Org.

До списку функцій середовища редагування входять: редактор автоматичного завершення php кодуіз закладеним підсвічуванням синтаксису, помилок, входжень; налагодження коду також є зручний інтерфейс і система навігації. Одним з додаткових плюсів є можливість переглянути історію роботи з файлом, у разі помилки завжди є можливість повернутися назад і відновити потрібний елемент. Розширити можливості середовища можна, встановивши додаткові плагіни.

Найкраща платна IDE – PHP Storm

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

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

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

Ще однією функцією, яка суттєво полегшує роботу з кодом: автодоповнення. Достатньо ввести частину тексту чи коду, а програма її доповнить, допише. Функція фіналізує імена змінних, ключові слова PHP, класи та методи.

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

Найбільш недооцінене середовище – Sublime Text

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

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

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

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

Найпопулярніша - Eclipse PDT

Сильна сторона IDE Eclipse PDT – здатність підтримувати велика кількістьмов програмування, чому можна назвати продукт універсальним. Це робить систему затребуваною веб-розробниками у всьому світі.

Є можливості згортати частину коду в один рядок, рефакторинг, редактор здійснює аналіз коду і в разі потреби виправляє його самостійно. Інтегроване середовище PDT дозволяє локально налагоджувати PHP-скрипти, але є можливість об'єднатися з Zend Server і XDebug і здійснювати налагодження з їх допомогою.

Cloud 9 – хмарне середовище розробки

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

Робота в Cloud 9 зручна тим, що програмне забезпечення здійснюється без участі користувача. Інформація зберігатиметься не на комп'ютері, а у хмарі. Сховище даних є максимально безпечним і навіть якщо з ПЗ користувача щось трапиться, то інформація з якою працювали в Cloud 9 збережена на віддаленому серверіта повністю захищена.

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

Проста та легка IDE - PHP Designer

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

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

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

Найкраща серед непопулярних IDE – Codelobster

Це середовище розробки не набуло поширення і не набрало популярності, але про неї слід згадати. Вона працює з багатьма мовами програмування, зокрема PHP. Зручна система навігації, набір гарячих клавіш та інструменти, які полегшать роботу, прискорять її та збільшать продуктивність.

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

Найперспективніша - Zend Studio

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

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

Висновок

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

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

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

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

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

WYSIWYG – це абревіатура від англійських слів What You See Is What You Get, що перекладається як «що бачиш, те й отримаєш». Тобто йдеться про середовище розробки, в якому користувач у міру своєї роботи може відразу ж бачити зразковий результат своїх зусиль. Найчастіше в Рунеті використовується російськомовний аналог згадуваної абревіатури, і програми такого типу звуться візуальними редакторами. За допомогою подібних програм можна створювати код на різних мовахпрограмування та верстки - HTML, CSS, PHP та ін.

Найпопулярніший WYSIWYG-редактор HTML та інших мов веб-розробки – Adobe Dreamveawer. Він відрізняється дійсно зручним інтерфейсом, великою кількістю доступних інструментів, підтримкою актуальних технологій та інтеграцією з іншими програмами пакета Creative Suite. Великим плюсом Adobe Dreamveawer є наявність докладної професійної документації, а також безлічі безкоштовних уроківпо роботі з програмою, які можна знайти у мережі Інтернет. Крім того, він може працювати з поширеними двигунами (CMS), такими як Joomla, WordPress та Drupal. Актуальною є версія CS6.

Ще один популярний візуальний редактор — WYSIWYG Web Builder, який нещодавно оновився до версії 9. Це потужне рішення, за допомогою якого можна створювати якісні веб-сайти, не маючи навичок верстки та веб-програмування. Програма дозволяє створювати як прості сайти-візитки, так і багатосторінкові ресурси зі складними сценаріями та вставкою інтерактивних елементів. У комплекті йдуть кілька різних шаблонів, а в процесі роботи можна додавати нові. В останній версії WYSIWYG Web Builder з'явився стрічковий інтерфейс, додані нові можливості для роботи з CSS3 та більше сотні інших покращень.

Окрім комерційних рішень, є й добрі open-source рішення. Наприклад, безкоштовний візуальний редактор BlueGriffon, створений на движку Gecko, на якому працює також всесвітньо відомий браузер Mozilla Firefox.

Це сучасне та надійне рішення для редагування веб-сторінок та створення сайтів, що відповідає останнім стандартам Web. BlueGriffon є мультимовним візуальним редактором HTML, PHP, CSS та інших мов веб-розробки, який має інтуїтивно зрозумілий, зручний інтерфейс, а редагований в ньому документ виглядатиме так само як у браузері Firefox .

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

Сучасний 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"а, а також мати достатню кількість функцій для втілення всіх ідей редактора щодо форматування тексту статті, і ніколи не повинно виникати таких питань як : "А куди потрібно натиснути?", "А чому воно не показує:.", "А куди подівся весь текст":

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

Автоматичне форматування тексту, що вставляється

Додамо функції форматування

Змінимо розташування панелей керування

Задамо мову редактора

Додамо перевірку орфографії

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

Панель форматування знаходиться зверху

Панель стану відсутня

Мова редактора - російська

Функції форматування: жирний, курсив, підкреслення, шрифт, розмір, стиль тексту, колір, заливка.

Функції структурного форматування: таблиця, вирівнювання, табуляція, перелік

Додаткові функції: вставка зображення, вставка, перегляд, вставка гіперпосилання, функції "відкату" та "повернення", ну і, напевно, введемо друк.

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

Для здійснення функції авторформату вставляється ззовні тексту необхідно вказати параметр хеш-списку - "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.

TNT43 Visual Editor tinyMCE.init(( mode: "textareas", theme: "advanced", language: "ru", plugins: "table,save,advhr,advimage,advlink,insertdatetime, preview,zoom, searchreplace,print,contextmenu ,paste,directionality ", theme_advanced_buttons1_add_before: "save,newdocument,separator", theme_advanced_buttons1_add: "fontselect,fontsizeselect", theme_advanced_buttons2_add: "separator,insertdate,ins advanced_buttons2_add_before: "cut,copy ,paste,pastetext,pasteword,separator", theme_advanced_buttons3_add: "advhr,separator,print,separator,ltr,rtl,separator ", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", ertdate_dateFormat: "% Y-%m-%d", plugi2n_insertdate_timeFormat: "%H:%M:%S", theme_advanced_resizing: true, theme_advanced_resize_horizontal: false, paste_auto_cleanup_on_paste: true, paste_convert_headers_to remove_spans: false, paste_remove_styles: false));

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

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

Плагіни - деякі зовнішні модулі, які необхідні здійснення тих чи інших функцій програми. Плагіни розміщуються в папці 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-інтерфейсу, без яких часто дуже складно уявити роботу з редактором. Але обіцяю, що ми розглянемо їх у наступних випусках МК.