От автора: приветствую Вас, дорогой друг. Для создания материалов сайта, администратору необходимо добавить текст, в специальную текстовую область. При этом, его форматирование осуществляется непосредственно в текстовой области, с использованием визуального редактора, от которого, конечно же, зависит продуктивность и удобство работы. Поэтому в данной статье я хотел бы рассмотреть удобный и функциональный редактор — JCE editor для Joomla 3.

Итак, для тех, кто не знает в Joomla визуальный редактор – это специальная библиотека, а лучше сказать расширение, благодаря которому, информация, редактируемая в текстовой области, будет выглядеть на странице точно так же, как она выглядит непосредственно в редакторе. При этом форматирование осуществляется не ручным прописыванием тегов HTML, и использованием элементов управления редактора. А значит, оформить текст сможет абсолютно любой человек, без наличия специальных знаний.

Как Вы знаете, система управления контентом Joomla, так сказать из коробки, поставляется с двумя встроенными визуальными редакторами — CodeMirror и TinyMCE. Лучшим, конечно, является второй, но все же, по удобству использования, а также гибкости настроек он не совсем хорош. Поэтому я бы рекомендовал, для сайта, на котором, предполагается частое добавление больших материалов со сложным форматированием, использовать более удобный и функциональный редактор.

В данное время создано большое количество различных визуальных редакторов для Joomla 3. В этом мы можем убедиться, перейдя в раздел “Editors”, официального сайта расширений Joomla.

Каждое из доступных расширений обладает определенными достоинствами и недостатками, но все же, как показала практика, редактор JCE для Joomla 3, является наиболее удобным и функциональным. Поэтому кликаем, по заголовку данного редактора и переходим на страницу его описания.

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

Но, не спешите пока приступать к работе с новым редактором для джумла 3, так как для более комфортной работы необходимо скачать пакет локализации. Для этого возвращаемся на сайт разработчиков и используя главное меню, переходим на страницу “Languages” (Главное меню->Downloads->Languages).

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Выбрав интересующий язык, кликаем по кнопке “Create Package” для формирования архива, а затем, используя кнопку “Download”, скачиваем готовый к установке пакет локализации. При этом данный пакет, установить при помощи менеджера расширений, не получится, так как это локализация компонента редактора и ее установку необходимо производить с панели управления JCE.

Теперь, необходимо перейти в глобальные настройки CMS Joomla (Главное меню->Сиcтема->Общие настройки) и на вкладке “Сайт”, в выпадающем списке “Редактор по умолчанию”, выбираем только что установленный редактор для Joomla 3.

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

Визуальный редактор JCE Editor, помимо функционала, хорош своей гибкостью в плане настроек. Для доступа к настройкам необходимо перейти в панель управления редактора, используя меню компонентов (Компоненты->JCE Editor).

Для установки пакета локализации, переходим в раздел “Install Add-ons”, выбираем файл с архивом и кликаем по кнопке “Install Package” для установки. После обновления страницы в браузере, установленная локализация будет применена.

В разделе “Общие настройки редактора ” приведены основные настройки редактора.

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

В разделе “Профили редактора” Вы можете создать или отредактировать профиль работы редактора. Профиль – это настройка редактора под конкретную группу пользователей. Как Вы знаете у каждой группы пользователей в Joomla, свои определенные привилегии и полномочия. Соответственно, если для некоторых групп, необходимо ограничить функционал редактора, то есть ограничить количество доступных элементов управления, значит необходимо, либо создать новый профиль, либо отредактировать один из стандартных. Опять же сейчас я не привожу описание настроек профиля, так как их очень много, да и это не требуется – интерфейс страницы настроек интуитивно понятен и к тому же каждый параметр сопровождается подробным описанием.

Таким образом, как Вы видите, редактор JCE действительно более удобен, нежели инструменты, которые поставляются в стандартном функционале. Более подробно, работа с данным редактором, рассмотрена в курсе .

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

В сегодняшнем уроке уважаемые читатели блога мы с вами рассмотрим компонент JCE-Editor лучший редактор Joomla 2.5 . Почему лучший? Да потому что его функционал просто поражает. Скажу честно, что я всех его возможностей тоже не знаю. Использую только малую толику, но и этого вполне хватает. Расскажу о том, что знаю сам.

Текстовый редактор JCE (расшифровывается как Joomla Content Editor) представляет из себя целый пакет расширений для работы с любым практически контентом.

Важно! Плагины устанавливаются не через Расширения > Менеджер расширений , а через установщик самого компонента JCE-Editor .

После установки необходимых нам плагинов так же через установщик самого компонента JCE-Editor производим русификацию компонента.

компонента JCE-Editor и расширение станет на русском.

С установкой расширения JCE-Editor мы закончили и переходим к его настройке.

Переходим на вкладку Глобальная конфигурация. Здесь оставляем все по умолчанию.

В принципе здесь то же можно все оставить по умолчанию. Единственное что, это вы можете назначить Группы пользователей для отображения редактора.

Вкладка особенности - здесь вы можете отредактировать кнопки какие необходимы путем простого перетаскивания из Текущий макет редактора в Доступные кнопки и обратно. Или поменять кнопки местами отредактировав, сгруппировав их под себя.

Вкладка Параметры редактора > Установки - оставляем по умолчанию.

Вкладка Параметры редактора > Параметры - в верхней части все интуитивно понятно. Если нет необходимости что то менять, то оставляем как есть.

А вот в нижней части настроек меняем Нет на Да Разрешить Javascript, Разрешить CSS, Разрешить PHP, Разрешить Applet , Показать все символы. И еще можно поменять на русское Вкл/Выкл Метку переключателя редактора.

Вкладка Параметры редактора > Файловая система - оставляем без изменений.

Теперь переходим к настройкам плагинов. Вкладка Параметры плагинов. Здесь уже будет поинтересней.

Рассматриваем все по порядку сверху вниз. Настройки плагинов Разрыв статьи, Браузер файлов не трогаем.

Честно говоря не разбирался. Понимаю, что это настройки визуализации таблиц создаваемых в материале. Если хотите, и есть время, поэкспериментируйте сами.

Файловый менеджер. В настройках можете указать путь к определенной папке где будут содержаться ваши файлы. По умолчанию текстовый редактор JCE-Editor открывает папку images. В это поле можно добавить папку допустим file и при нажатии на кнопку в редакторе Добавить файл будете попадать именно туда. Прошу обратить внимание на настройку параметров Значение по умолчанию. Здесь вы можете задать как будет открываться файл: в этом окне, в новом окне и т.д. А так же включить иконку формата файла, дату файла и его размер. Рекомендую их включить. Данные параметры будут добавляться к файлу автоматически.

Особенно акцентирую ваше внимание на параметр Допустимые расширения файлов . Очень важный параметр, скрытый за неприметной кнопочкой. Очень долго я мучился, не понимая, почему редактор JCE-Editor не видит архив RAR. Данного расширения просто нет в настройках по умолчанию. Поэтому рекомендую внимательно относится к этой кнопке в настройках всех плагинов этого редактора. Так как не все используемые вами форматы на сайте могут там быть. Добавляется формат через кнопку добавить.

Здесь все интуитивно понятно. Особенно задерживаться не будем. Рекомендую ничего не трогать, только проверить все ли форматы нужные вам прописаны в настройках.

Здесь на что нужно обратить внимание так на то, что можно сразу задать параметр для всех ссылок открываться в новом окне или фрейме.

Все понятно. проблем не должно возникнуть.

Можете создать папку в images и указать к ней путь. Проверить все ли расширения файлов необходимые вам прописаны.

Не разбирался. Оставлял по умолчанию.

Тут то же все понятно.

В Менеджер шаблонов оставляем все параметры как есть.

Ну вот вроде все, настройки разобрали, осталось чуть чуть это включить сам редактор . Вернее сделать его редактором по умолчанию.

Заходим в Сайт > Общие настройки > Сайт.

В настройках параметра Редактор по умолчанию выбираем Editor-JCE.

Заходим в менеджер материалов. Создаем новый материал и у нас Editor-JCE по умолчанию.

При подведении к кнопке указателя мыши появляется подсказка что это за кнопка. Посмотрите и разберитесь сами. Если по его использованию делать урок, то это еще на пять листов.

Вот теперь все. И мы разобрали текстовый редактор JCE-Editor лучший редактор для Joomla 2.5 его установку и настройку .

P.S. Если статья оказалась для Вас полезной, то вы можете сказать спасибо нажав на кнопки соцсетей, лайкнув в фейсбуке и т.д., или написать комментарий, или подписаться на новости. Я старался и старался для Вас. Спасибо!

Вложения:
Файл Описание Размер файла:
com_jce_203_j16_25.zip Сам компонент 1485 Кб
com_jce_203_plg_jcemediabox_1017_lang_ru_3.zip Сам русификатор 57 Кб
jce_caption_201.zip плагин создает надпись вокруг изображения 27 Кб

CMS версий 3.2 / 2.5 / 1.5. За счёт данного визуального редактора можно сделать написание контента на сайте, и его редактирование более удобным и простым, чем в каком либо другом визуальном редакторе WYSWYG.

JCE редактор имеет довольно большой ассортимент полезных функций для работы в админпанели Joomla. Вы сможете оформлять тексты на страницах своего сайта без каких либо знаний языка разметки HTML / XHTML и каскадных таблиц стилей CSS.

JCE редактор для Joomla имеет около 50-и команд, где каждая команда запрограммирована на визуальную кнопку или раскрывающийся список в компоненте.

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

Основными преимуществами JCE компонента:

  • Компонент имеет стандартные кнопки для редактирования контента на сайте, и для удобной работы с графическими изображениями, с удобным интуитивно понятным интерфейсом;
  • Имеется довольно удобный поиск текста в статьях, пред просмотр размещаемой статьи, гибкая работа с таблицами на сайте;
  • Редактор позволяет быстро в удобной форме создавать ссылки для разделов на сайте, для категорий, а также статей.
  • Есть возможность полностью контролировать HTML код каждой размещённой на сайте страницы, JCE компонент удобно подсвечивает открывающиеся и закрывающиеся парные теги, автоматически удаляет не нужный код средактируемых страниц;
  • Имеется встроенная функция проверки правописания в тексте, реализованная за счёт применения электронной Орфографии (или PSpell и ASpell).

Установка JCE редактора на Joomla сайт осуществляется стандартным методом, то есть через "менеджер расширений" в админ-панели сайта.

Русификация компонента осуществляется путём установки в сам компонент плагина (дополнение (addon) к установленному компоненту).

Чтобы русифицировать JCE редактор, необходимо зайти в админ-панели в "компоненты", далее выбрать "JCE-редактор", потом выбрать "Установка дополнений " и через кнопку обзор выбрать на своём компьютере заранее скаченный zip архив с русификатором JCE. Как только вы установите русификатор, компонент автоматически русифицируется, включая все подсказки в данном WYSWYG редакторе.

Важно! Чтобы русификатор компонента корректно работал, необходимо чтобы сама Joomla CMS также была русифицирована.

Подключение сервиса проверки правописания Яндекс.Спеллер к JCE редактору

Чтобы подключить правописание, вы можете обратиться к инструкции в поисковой системе Яндекс. Как подключить правописание в JCE редактор от Яндекса, читайте на Яндекс.Спеллер .

Как для новичков, так и для опытных пользователей у JCE редактора имеется модифицированная версия, которую вы можете установить себе на сайт. Вам не нужно особо будет возиться с кодом, всё что нужно будет сделать, так это просто включить в профиле JCE редактора использование русского языка для проверки правописания.

Для включения данной опции зайдите в административную часть компонента (Администрирование JCE), далее в "Профили редактора", (тут необходимо выбрать профиль которым вы пользуетесь), например, Default. Далее необходимо будет открыть вкладку "Параметры плагина", далее "Правописание ". Дальше всё что необходимо будет, так это просто включить и установить русский язык первым в вашем списке.

Для использования функции проверки орфографии в JCE редакторе, используйте кнопку правописание, что находится на панели управления.

В этом уроке рассмотрим самый качественный и продвинутый визуальный редактор для создания материала для Joomla 2.5/3.х. Начнем с установки редактора и закончим выставлением его необходимых настроек для работы.
Редактор JCE в отличие от стандартного TinyMCE обладает отдельным компонентом, что делает его более функциональным и настраиваемым. Текстовый редактор JCE (Joomla Content Editor) это целый пакет расширений для работы с практически любым материалом. Широкий функционал инструментов, расположенных в рабочей панели редактора, позволяет значительно облегчить и ускорить процесс создания материалов для страниц Вашего сайта.

На сайте разработчиков JCE можно скачать сам компонент JCE-Editor, плагины к нему и русификатор. Бесплатно у разработчиков выложен только один плагин - MediaBox. О назначении плагинов я напишу в дополнительной статье. Платные плагины значительно расширяют функционал редактора JCE. В конце статьи я дам ссылку на скачивание плагинов из моей библиотеки расширений (без вредоносных скриптов и левых ссылок) У меня эти плагины работают на Joomla 2.5 и Joomla 3.х.
Итак заходим на сайт https://www.joomlacontenteditor.net/downloads/editor/joomla-3 и скачиваем последнюю версию редактора.


Затем скачиваем последнюю версию плагина JCE MediaBox for Joomla!3.


И наконец скачиваем пакет русификации для редактора.


Установка и настройка визуального редактора JCE для Joomla 2.5/3.х.
Установка редактора JCE и плагина JCE MediaBox происходит стандартным способом: Расширения >>> Менеджер расширений. Русификатор и остальные плагины устанавливаются через встроенный инсталлятор редактора JCE - Install Add-ons. После установки заходим в Компоненты >>> JCE Administration


Переходим на вкладку "Install Add-ons". Нажимаем Browse - выбираем архив русской локализации для JCE Editor и устанавливаем Install Package.



Точно таким образом устанавливаем необходимые плагины.


Переходим на вкладку "Общие настройки редактора". Здесь оставляем все по умолчанию.


Здесь выбираем "Установки"


В принципе здесь то же можно все оставить по умолчанию.
Вкладка "Особенности и макет" – здесь вы можете отредактировать кнопки необходимые вам путем обычного перетаскивания из "Текущий макет редактора" в "Доступные кнопки" и также обратно. Смотрите рисунок ниже.


Вкладка "Параметры редактора" >"Очистить и вывести" – оставляем по умолчанию.


Вкладка "Параметры редактора" >"Типографика" – здесь тоже нас всё устраивает.


Вкладка "Параметры редактора" >"Файловая система" – оставляем без изменений.


Вкладка "Параметры редактора" >"Расширенные" – меняем "Нет" на "Да" Разрешить Javascript, Разрешить CSS, Разрешить PHP, Встроенные скрипты XHTML.


Теперь переходим к настройкам плагинов. Вкладка "Параметры плагинов" . Отмечаем все элементы форматирования .

Можете пробежаться по всем позициям: Формат, Разрыв статьи, Браузер файлов и т.д. Отдельно хочу остановиться на "Буфере обмена" .

При копировании и вставке текста из Microsoft Word в окно редактора JCE с помощью известных комбинаций клавиш Ctrl-C и Ctrl-V копируется много лишней информации, заключенной в стилях и тегах Microsoft Word . Их можно увидеть перейдя из визуального вида редактора JCE в HTML вид с помощью кнопки "Toggle Editor" . Дело в том, что редактор JCE не убирает этот мусор, что в свою очередь приводит к увеличению объема кода страницы и, как следствие, к увеличению времени ее загрузки. Поэтому, прежде чем вставить статью в окно редактора JCE, материал нужно сначала скопировать в блокнот, а из него в окно редактора JCE.

Однако можно настроить редактор JCE так, чтобы оптимизировать и сократить код без ущерба для вида страницы после вставки материала сразу из Microsoft Word. Выставьте параметры как указано ниже.
Очистка Microsoft Word -выбираем "Всегда" .
Атрибуты классов - "Да".
Удалять все SPANS- "Да".
Удалять все стили- "Да".
Теперь вставка материала из Microsoft Word в окно редактора JCE с помощью той же комбинаций клавиш Ctrl-C и Ctrl-V или с помощью кнопки "Paste" в панели инструментов редактора будет осуществляться без ненужного хлама.
После установки, необходимо включить редактор JCE по умолчанию. Для этого заходим в Сайт > Общие настройки > Сайт . В колонке "Редактор по умолчанию" выставляем "Редактор - JCE" . Далее жмём "Сохранить и закрыть".


В "менеджере материалов" - "создать материал" видим окно редактора JCE и панель его инструментов.


P.S. Если у вас при попытке, вставить изображение в статью во всплывающем окне неожиданно появятся "кракозябры" не огорчайтесь, просто нужно в файл administrator/components/com_jce/jce.php после строчки: defined("_JEXEC") or die("RESTRICTED"); прописать следующую строчку: header("Content-type: text/html; charset=utf-8");
и все будет на русском языке.
Если у вас возникли вопросы напишите об этом комментарий. Спасибо за внимание!

На личном опыте я убедился, что наиболее удобный визуальный редактор для Joomla 3.x – это JCE, который обладает максимальными возможностями для оформления контента. Единственной проблемой может стать его правильная установка и настройка, поэтому их мы рассмотрим в данном уроке. Последняя проверка (и скрины) проводилась на Joomla 3.4.8.

Получение исходных файлов

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

Затем качаем пакет русификации

И плагин JCE MediaBox for Joomla! 3

Установка и настройка редактора JCE для Joomla 3.x

Установка компонента com_jce_2516 и плагина plg_jcemediabox_122_joomla3 происходит обычным способом через Расширения – Менеджер расширений:

Русификатор для редактора JCE и дополнительные плагины устанавливаются только через встроенный инсталлятор компонента JCE:

Компоненты – JCE Administration – Install Add-ons

Для установки русификатора во вкладке Install Add-ons нажимаем на кнопку Browse, выбираем сохраненный архив jce_language_ru-RU_2514 и устанавливаем его, нажав на кнопку Install Package.

После этого переходим во вкладку «Общие настройки редактора», где оставляем все без изменений:

Переходим во вкладку "Профили редактора", выбираем шаблон Default

и нажимаем «Изменить»

В открывшемся окне выбираем «Установки», где можно ничего не менять:

Во вкладке «Особености и макет»

Данные во вкладках «Очистить и вывести», «Типографика» и «Файловая система» оставляем без изменений:

А во вкладке «Расширенные» отмечаем «Да» для позиций: Разрешить Javascript, Разрешить CSS, Разрешить PHP, Встроенные скрипты XHTML.

Теперь переходим в верхнюю вкладку «Параметры плагинов» и отмечаем «птичками» все элементы форматирования:

Наиболее важной я считаю «Буфер обмена», который позволит переносить контент непосредственно из MS Word. Ведь ранее мы не могли это делать напрямую, так как попутно копировалось много лишней информации, приводящей к увеличению размера кода страницы. А это, в свою очередь, приводило к заметному увеличению времени ее загрузки. Такую «служебную» информацию можно увидеть, перейдя в режим HTML при помощи кнопки «Toggle Editor». Вот и копировали мы сначала текст в «Блокнот», а уже из него (без лишнего кода) вставляли в редакторы Joomla.

Теперь же редактор JCE мы настраиваем таким образом, что он автоматически сокращает код страницы из Microsoft Word и оптимизирует его для прямой вставки материала. Выставляем параметры следующим образом:

Теперь можете вставлять материал из Word с помощью кнопки «Paste» панели инструментов или комбинаций клавиш Ctrl-C и Ctrl-V.

После сохранения:

надо включить редактор JCE, войдя в «Параметры» – «Общие настройки». Выставьте «Редактор - JCE» в ячейке «Редактор по умолчанию»:

Теперь в Менеджере материалов мы видим, что основной редактор – JCE:

Внимание!

administrator/components/com_jce/jce.php

после строки

defined("_JEXEC") or die("RESTRICTED");

пропишите строчку

header("Content-type: text/html; charset=utf-8");

На личном опыте я убедился, что наиболее удобный визуальный редактор для Joomla 3.x – это JCE , который обладает максимальными возможностями для оформления контента. Единственной проблемой может стать его правильная установка и настройка, поэтому их мы рассмотрим в данном уроке. Последняя проверка (и скрины) проводилась на Joomla 3.4.8.

Получение исходных файлов

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

Последние версии копмонента, русификатора и бесплатного плагина :

Компонент JCE com_jce_2516 Depositfiles

Русификатор jce_language_ru-RU_2514 Depositfiles

Плагин plg_jcemediabox_122_joomla3 Depositfiles

Можете самостоятельно скачать с англоязычного сайта:

Заходим на сайт разработчиков по ссылке: joomlacontenteditor и скачиваем версию редактора, которая является последней на сегодняшний день.

Затем качаем пакет русификации

Установка и настройка редактора JCE для Joomla 3.x

Установка компонента com_jce_2516 и плагина plg_jcemediabox_122_joomla3 происходит обычным способом через Расширения – Менеджер расширений :

Русификатор для редактора JCE и дополнительные плагины устанавливаются только через встроенный инсталлятор компонента JCE :

Компоненты – JCE Administration – Install Add-ons

Для установки русификатора во вкладке Install Add-ons нажимаем на кнопку Browse , выбираем сохраненный архив jce_language_ru-RU_2514 и устанавливаем его, нажав на кнопку Install Package .

Подобным образом устанавливаем и дополнительные плагины:

После этого переходим во вкладку «Общие настройки редактора », где оставляем все без изменений:

Переходим во вкладку "Профили редактора ", выбираем шаблон Default

и нажимаем «Изменить »

В открывшемся окне выбираем «Установки », где можно ничего не менять:

Во вкладке «Особености и макет »

редактируем местонахождение кнопок, путем обычного перетаскивания из области «Доступные кнопки панели» в «Текущий макет». Ненужные перетаскиваем в обратном направлении.

в итоге (с вариациями) получаем:

Данные во вкладках «Очистить и вывести », «Типографика » и «Файловая система » оставляем без изменений:

А во вкладке «Расширенные » отмечаем «Да » для позиций: Разрешить Javascript , Разрешить CSS , Разрешить PHP , Встроенные скрипты XHTML .

Теперь переходим в верхнюю вкладку «Параметры плагинов » и отмечаем «V » все элементы форматирования:

Как видите, слева находится много вкладок, которые можете изучить самостоятельно.

Наиболее важной я считаю «Буфер обмена », который позволит переносить контент непосредственно из MS Word . Ведь ранее мы не могли это делать напрямую, так как попутно копировалось много лишней информации, приводящей к увеличению размера кода страницы. А это, в свою очередь, приводило к заметному увеличению времени ее загрузки. Такую «служебную» информацию можно увидеть, перейдя в режим HTML при помощи кнопки «Toggle Editor ». Вот и копировали мы сначала текст в «Блокнот», а уже из него (без лишнего кода) вставляли в редакторы Joomla.

Теперь же редактор JCE мы настраиваем таким образом, что он автоматически сокращает код страницы из Microsoft Word и оптимизирует его для прямой вставки материала. Выставляем параметры следующим образом:

Теперь можете вставлять материал из Word с помощью кнопки «Paste » панели инструментов или комбинаций клавиш Ctrl-C и Ctrl-V .

После сохранения:

надо включить редактор JCE , войдя в «Параметры » – «Общие настройки ». Выставьте «Редактор - JCE » в ячейке «Редактор по умолчанию »:

Теперь в Менеджере материалов мы видим, что основной редактор – JCE :

Внимание!

Часто бывает, что при попытке вставить изображение, во всплывающем окне появляются «кракозябры». Если вы наблюдаете аналогичное, проделайте следующую процедуру:

В файле

administrator/components/com_jce/jce.php

после строки

defined("_JEXEC") or die("RESTRICTED");

пропишите строчку

header("Content-type: text/html; charset=utf-8");

и все надписи обретут нормальный русскоязычный вид.

Желаю вам успешного написания сайтов!