Лучшие 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,inserttime,preview,zoom,separator, forecolor,backcolor", theme_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", theme_advanced_statusbar_location: "bottom", plugi2n_insertdate_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_strong: false, paste_strip_class_attributes: "all", paste_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-интерфейса, без которых часто очень сложно представить себе работу с редактором. Но обещаю, что мы рассмотрим их в следующих выпусках МК.



    gastroguru © 2017