Создание простой CMS с WYSIWYG редактором

Данный урок расскажет Вам о том как создать простую CMS с WYSIWIG редактором.

Превратите ваш PHP сайт в полноценную CMS! Возможность редактировать Ваши текст в стиле WYSIWYG сделать намного проще, чем Вы думаете. Именно об этом пойдет речь в нашем уроке. Вам больше не придется загружать измененные файлы к себе на хостинг, все тексты Вы сможете поменять из любого места, где есть Интернет.

Забрать исходники

Прикреплённые файлы:
Файл: wysiwyg.txt
Размер: [930,19 Kb] (забрали: 24 раз)

Этот урок расскажет Вам об основах разделения Ваших текстов и дизайна, а также о том, как добавить WYSIWYG редактор для внесения изменений в текст.

Чтобы лучше понять этот урок Вам необходимо иметь базовые знания:

— HTML
— PHP Основы
— Формы (и POSTing)
— Строки запросов($_GET)

Этот урок расскажет Вам о:

— Отделении шапки и футера от общего содержания страницы
— Создании шаблона странички с текстом
— Добавлении javascript WYSIWYG редактора.

Было рассмотрено множество разных javascript редакторов, но больше всех мне понравился TinyMCE. Он бесплатен и может быть добавлен к любому текстовому полю. После добавления все содержимое поля можно редактировать в стиле MS Word. Данный редактор очень гибок и функционален и при более глубоком изучении все это можно реализовать. В нем множество встроенных функций, вплоть до создания таблиц и редактирования во весь экран.

Часть №1 — Отделение шапки и футера от основной части страницы

Многие из Вас уже проделывали эту операцию. Главная задача всего этого — это создание отдельных файлов для шапки и футера, что в дальнейшем существенно поможет Вам при внесении изменений во все страницы сайта (особенно, если их много). В шапке обычно находится красивая картинка и элементы навигации, также иногда разные DIVы для правильной компоновки частей сайта. В футере все DIVы обычно закрываются и часто вставлятеся информация о копирайтах.

Пример шапки:
header.html

===========
      <html>
      <head>
      <!— Все что касается тега head идет сюда  —>
      </head>
      <body>
<div style=»width: 800px»>
<!— Картинка в шапке —>
      <img src=»header.jpg» /><br />
<!— Навигация —>
      <p style=»text-align: center»>
      <a href=»link1.php»>Link 1</a> |
      <a href=»link2.php»>Link 2</a> |
      <a href=»link3.php»>Link 3</a> |
      <a href=»link4.php»>Link 4</a>
      </p>


Заметьте, что теги DIV, BODY и HTML не закрыты. Это будет сделано в футере.

Пример футера:
footer.html


      ===========
      </div>
      <p style=»text-align: center»>Сайт создан специально для урока командой <a href»http://ruseller.com»>Ruseller.com</a></p>
      </html>


Теперь для использования этих файлов на сайте нам необходимо создать еще один файл:
index.php


===========
      <?php
      include(«header.html»);
// Сюда вставляем содержание страницы
include(«footer.html»);
      ?>

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

Часть №2 — Создание шаблона страницы с контентом

Поскольку большинство страниц на многих сайтах идентичны (различия только в контенте), зачем нам множество php файлов? Для каждой страницы на нашем сайте, у нас теперь есть функция «include» для шапки, футера и место для контента. Это нормально, если у Вас всего несколько страниц. Но что если мы начнем создавать сотни страниц с разным контентом? Создание множества таких файлов может занять у Вас много времени. Фокус заключается в том, чтобы у Вас была одна страница с контентом и множество текстовых файлов (1 файл = 1 страница). Создайте папку под названием «pages» или что-то в этом роде и поместите туда .txt файлы с наполнением для страниц. Убедитесь в том, чтобы в этих файлах не было ничего, что касается хедера и футера.

Пример такого текстового файла:

news.txt
  ===========
  <h1 align=»center»>Новости</h1>
  <p>Сегодня, 18 мая, торги межбанковском валютном рынке завершились в диапазоне 10,234-10,258 грн за евро.
Так, согласно данным компании ИнтерБизнесКонсалтинг, торги по доллару завершились в диапазоне 7,6025-7,615 грн за доллар.
Как сообщается, торги по рублю завершились в диапазоне 0,2352-0,2185 грн за рубль. Национальный банк покупал и продавал доллары по курсу 7,62-7,7 грн за доллар.</p>


Как же мы это будем использовать на нашем сайте? Ответ очень прост: передавая строки запроса, которые будут сообщать скрипту о намерении просмотреть определенную страницу. Взгляните на нашу обновленную станицу index.php:
index.php


  ===========
  <?php
include(‘header.html’);
// Установить $page на «home.txt» если другой параметр не передан
  if ($_GET[‘page’]) {
  $page = $_GET[‘page’] . ‘.txt’;
  } else {
  $page = ‘home.txt’;
  }
// Проверить на существование файла и включить его.
  if (file_exists(«pages/$page»)) {
  include(«pages/$page»);
// Если файла нет — выдать сообщение об ошибке.
  } else {
  echo(«<h1 align=»center»>Страница не может быть найдена</h1>n»);
  }
include(‘footer.html’);
  ?>

Ничего сложного в этом нет, не правда ли? Теперь у нас множество текстовых (в которых хранится только контент, который можно по желанию легко отредактировать) и всего один PHP файл.

Очень полезной фишкой была бы функция, которая будет разбивать объемные текстовые файлы на несколько страниц, при это добавляя ссылки «Предыдущая» и «Следущая». Давайте ее сделаем! Следующий блок кода можно, по желанию, вставить сразу после ‘include(«pages/$page»)’. Данный скрипт ищет файл с окончанием в названии _страница(цифра) (например, news_1.txt, news_2.txt, news_3.txt и т.д. — это создаст 3 страницы перелинкованых между собой кнопками «Предыдущая» и «Следущая»)


if (preg_match(«/^(.*_page)(d+)/», $page], $matches)) {
$prev_page = $matches[2] — 1;
$next_page = $matches[2] + 1;
echo(«<p style=»text-align: center»>»);
if (file_exists(«pages/» . $matches[1] . $prev_page . «.php»)) {
echo(«<a href=»{$_SERVER[‘PHP_SELF’]}» .
«?page={$matches[1]}$prev_page»>Предыдущая страница</a>»);
$prev = 1;
}
if (file_exists(«pages/» . $matches[1] . $next_page . «.php»)) {
if ($prev) {
echo(«&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;»);
}
echo(«<a href=»{$_SERVER[‘PHP_SELF’]}» .
«?page={$matches[1]}$next_page»>Следующая страница</a>»);
}
echo(«</p>»);
}

Забрать исходники

[attachment=326]

Часть № 3 — Добавление javascript WYSIWYG редактора

Поскольку в следующем файле довольно много кода, мы его разобъем на несколько частей, и каждую часть детально разложим по полочкам.
secure/index.php


      ============
      <?php
      include(«../header.html»);
// Получите название страницы со строки запроса
      $page = $_GET[‘page’] . ‘.txt’;
if (!$_GET[‘page’]) {
      echo(«<h1>Старница не указана</h1>n»);
      include(«../footer.html»);
      exit;
      }


Пока все выглядит знакомо. Мы считываем хедер и получаем название страницы. Посколько мы находимся в другой папке (secure) нам необходимо немного модифицировать пути к шапке и футеру.


if ($_POST[‘page’]) {
      $handle = fopen(«../pages/$page», ‘w’);
      fwrite($handle, $_POST[‘page’]);
      fclose($handle);
      echo($_POST[‘page’]);
      include(«../footer.html»);
      exit;
      }


Поскольку редактор позволяет нам редактировать и тот же скрипт будет обрабатывать результат, код выше проверяет публиковали ли мы страницу. Если публиковали страницу с контентом — тогда скрипт открывает файл (указаный в запросе), переписывает его, закрывает и показывает нам обновленный файл. И в конце, выходит.


if (file_exists(«../pages/$page»)) {
  $FILE = fopen(«../pages/$page», «rt»);
  while (!feof($FILE)) {
  $text .= fgets($FILE);
  }
  fclose($FILE);
  } else {
  echo(«<h1>Новая страница: $page</h1>n»);
  $text = «<p></p>»;
  }


Если мы указали страницу, которая существует, тогда скрипт преобразует текст в переменную $text. Если не существует, скрипт предупреждает, что мы создаем новую страницу и переменная $text приобретает вид пустого параграфа (

).

Далее мы подключаем TinyMCE javascript редактор. Важно при подключении следить за правильностью путей к самому редактору.


echo <<< EOM
      <script language=»javascript» type=»text/javascript» src=»/tinymce/jscripts/tiny_mce/tiny_mce.js»></script>
      <script language=»javascript» type=»text/javascript»>
      tinyMCE.init({
      mode : «textareas»,
      theme : «advanced»,
      theme_advanced_toolbar_location : «top»,
      theme_advanced_toolbar_align : «left»,
      theme_advanced_path_location : «bottom»
      });
      </script>
      EOM;


Обычно все javascript мы подгружаем в шапке нашей страницы. Однако в нашем случае за шапку отвечает 1 файл, который подгружается ко всем страницам сайта. Секция «init» содержит все настройки редактора. Поле «mode: textareas» означает, что все текстовые поля на странице станут TinyMCE WYSIWYG полями (то есть их можно будет редактировать в стиле WYSIWYG). На официальном сайте TinyMCE множество информации о возможных настройках.


$this_page = $_SERVER[‘PHP_SELF’];
      $query_string = $_SERVER[‘QUERY_STRING’];
      echo(«<form method=»post» action=»$this_page$query_string»>n»);
      echo(«<textarea id=»page» name=»page» rows=25 cols=80>n»);
      echo(htmlspecialchars($text));
      echo(«</textarea>n»);
      echo(«<input type=»submit» value=»Сохранить»>n»);
      echo(«</form>n»);

Код выше создает форму, текстовое поле и кнопку «Сохранить». «htmlspecialchars($text)» извлекает из переменной $text весь текст и преобразовует все специальные символы в HTML коды. Это делается для того, чтоб HTML, который находится в текстовых файлах не конфликтовал с HTML самой странички. После этого полученный текст передается в текстовое поле. После нажатия «Сохранить», скрипт обращается к этой же странице с таким же запросом, но в этот раз уже с изменненой текстовой информацией.


include(«../footer.html»);
      ?>

И в конце не забываем про футер.

Заключение

Вот мы и создали простую CMS на файлах. Она не совершенна и требует доработки, но для простых сайтов сгодится. Надеюсь, данный урок Вам понравился! Жду Ваших комментариев и вопросов. Всегда рад на них ответить.