Установка визуального редактора

 

Доброго времени суток дорогой читатель Блога RS! С прошлого происшествия вроде все, как говорится, устаканилось! К тому же сегодня небольшой юбилей у блога, 100 дней в эфире! А это значит, пришла пора приступить к нововведением на нашем блоге. У меня уже были мысли на тему: "Какой будет следующий шаг". Подумав я решил не стопорится на данном вопросе, и приступить к улучшению редактора постов. Улучшать мы его будем, пока самым простым, и, как парой бывает, единственно правильным способом. Поставим визуальный редактор.

 

 

Предисловие

 

Визуальный редактор, он же "wysiwyg", он же "What You See Is What You Get" он же "Что вижу то и получаю". Многие встречались с этой диковинкой. Многие встречались и не знают, что бывает какой то другой редактор!

Я, большинство своей практики, вел администрирование сайта из обычно формы, то есть оформлял тексты непосредственно с помощью html кода. Сейчас я написал, на скорую руку, бб-кодную форму, и пишу Вам пост именно из такой формы. Пробовал работать с визуальным редактором, для меня это как вождение космического корабля, до жути не удобно. Но это для меня! Почти все блогеры пишут свои посты из визуальных редакторов, и не жалуются. Такой редактор удобен для новичка, поэтому пускай в нашей админке будет именно визуальный редактор!

Какой редактор будем ставить? Порылся я в интернете, и вывел для себя 3 самых известных визуальных редактора. Из них по большинству мнений самый лучший это tinyMCE. Хочу подчеркнуть, что выбор пал на этот редактор лишь из-за того, что отзывы о нем попадали на глаза чаще чем у других редакторов. Я не коем образом не советую Вам именно этот редактор! Я вообще работал с ним минут 5, если быть точнее, написал один тестовый пост, и понятие не имею хороший он или нет!

 

Скачиваем tinyMCE и ставим

 

Для того чтобы поставить этот редактор, необходимо его скачать. Переходим вот по этой ссылке и скачиваем актуальную версию. На момент написание поста, актуальная версия 3.4.7. Я скачивал с самой верхней ссылки

Далее нам необходим русификатор, жмем на кнопку "Languages" на сайте

Листаем вниз, находим "Russian" отмечаем чек бокс и жмем "Download"

Теперь у нас на компе два архива, один с самим редактором, другой с русификатором для редактора

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

После того как Вы перенесли файлы русификатора в файлы редактора, можете переносить редактор в папку с нашим блогом, вот так

Внимательно смотрите на пути файлов, я не зря Вам составляю скрин с адресной строкой!

 

Подключение

 

Для того чтобы подключить этот редактор необходимо всего лишь добавить несколько строчек в наш админский главный ( index.html ) шаблон. Я выложу Вам код всей головы ( head ) нашего шаблона

<head>
<title><?=$header_title?></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="<?=$header_metaD?>">
<meta name="keywords" content="<?=$header_metaK?>">
<link rel="stylesheet" type="text/css" href="templates/style.css">
<script type="text/javascript" src="templates/js.js"></script>
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode:"textareas",
theme:"advanced",
language:"ru"
});
</script>
</head>

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

 

Удаление лишнего кода из модулей

 

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

 

Шаблоны

 

Первый файл который попадет под резак, это шаблон добавления постов addcontent.html, из него нам нужно удалить две маленькие формы и панель бб кодов, вот как выглядит теперь этот шаблон

<table width="600px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="center">
<form action="index.php?page=add_content" method="post" name="form">
<br>
<input style="width:600px;" name="name_post" type="text" value="Название статьи">
<br>
<textarea style="width:600px;height:600px;" id="txt_post" name="txt_post" rows="10">Введите текст*</textarea>
<input style="width:600px;" name="author_post" type="text" value="Автор*">
<br>
<p align="left">
<select name="menu_post">
<option value="0">Нет категории</option>
[_option]
</select>
</p>
<br><br><input type="submit" value="Добавить пост">
</form>
</td>
</tr>
</table>

Как видите осталась лишь главная форма, и все!

Следующий шаблон который нам необходимо исправить, это eddcontent.html, с ним проделывается точна такая же операция

<table width="600px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="100px" height="100px" valign="top" align="center">
<form action="?page=edd_content" method="post" name="form">
<input name="edd_id_post" type="hidden" value="[_id]">
<br>
<input style="width:600px;" name="edd_name_post" type="text" value="[_title]">
<br>
<textarea style="width:600px;height:600px;" id="txt_post" name="edd_txt_post" rows="10">[_text]</textarea>
<input style="width:600px;" name="edd_author_post" type="text" value="[_author]">
<br>
<br><br><input type="submit" value="Редактировать пост">
</form>
</td>
</tr>
</table>

 

Модуль добавления контента

 

Далее процедура будет чуть по сложнее, но все же ничего трудного нам сделать не предстоит. Необходимо из модуля addcontent.php удалить строки кода, которые обрабатывали данные из формы, превращая их в безопасный текст. Переделываем наш обработчик вот до такого вида ( я выкладываю код лишь обработчика, не всего файла целиком )

if($name_post & $txt_post & $author_post)
{
$date_day = date("d");//Определяем день
$date_month = date("m");//Определяем месяц
$date_year = date("Y");//Определяем год
$date_time = date("H:i");//Определяем часы и минуты
$date_cont = $date_day."/".$date_month."/".$date_year." ".$date_time;//Склеим все переменные в одну
//получим дату для записи в формате день/месяц/год часы:минуты

//Избавляемся от кавычки
$name_post = str_replace("'","&#039",$name_post);
$txt_post = str_replace("'","&#039",$txt_post);
$author_post = str_replace("'","&#039",$author_post);

//ДОБАВЛЯЕМ ПОСТ В БАЗУ ДАННЫХ
$result_add_cont = mysql_query ("INSERT INTO blog (text,title,author,date_b,cat)
VALUES ('$txt_post','$name_post','$author_post','$date_cont','$menu_post')");
//ДОБАВЛЯЕМ ПОСТ В БАЗУ ДАННЫХ

header("location: index.php");//Перенаправление
exit;//на главную страницу
}

Из модуля я удалил строчки переделывающие html код в его безопасный аналог, также удалил все строки которые переделывали бб код в html код. Так же я удалил строчку которая заменяла переносы строки на тег BR.

 

Модуль редактирование контента

 

Тут необходимо не только проделать ту же операцию, что и выше, но и удалить скрипт заменяющий html код на бб коды. Но для начала давайте удалим лишние строчки, обработчика записи поста в БД, как в предыдущем пункте. Переходим в модуль allcontent.php и беспощадно укорачиваем его! ( Я Вам демонстрирую лишь кусочек кода из модуля )

if($edd_name_post & $edd_txt_post & $edd_author_post)
{
//Избавляемся от кавычки
$edd_name_post = str_replace("'","&#039",$edd_name_post);
$edd_txt_post = str_replace("'","&#039",$edd_txt_post);
$edd_author_post = str_replace("'","&#039",$edd_author_post);

//ОБНОВЛЯЕМ ПОСТ В БАЗЕ ДАННЫХ
$edd_blog = mysql_query ("UPDATE blog SET text='$edd_txt_post',title='$edd_name_post',author='$edd_author_post' WHERE id='$edd_id_post'");
//ОБНОВЛЯЕМ ПОСТ В БАЗЕ ДАННЫХ

header("location: index.php?page=all_content");//Перенаправление
exit;//на главную страницу
}

Осталось переделать функцию вывода поста в форму. Беспощадно выкидываем все куски кода, которые отвечают за преобразования html кода в бб коды. Вот результат

function eddcontent($id)//Функция вывода выбранного поста
{
$result_index = mysql_query("SELECT * FROM blog WHERE id='$id'");//Выводим из базы данных пост
$myrow_index = mysql_fetch_array($result_index);

$sm_read = file("templates/eddcontent.html");//...подключаем шаблон
$sm_read = implode("",$sm_read);//функция file() возвращаем массив, поэтому склеиваем его

//Делаем замены код-слов
$sm_read = str_replace("[_title]",$myrow_index[title],$sm_read);//Название поста
$sm_read = str_replace("[_text]",$myrow_index[text],$sm_read);//Текст поста
$sm_read = str_replace("[_author]",$myrow_index[author],$sm_read);//Автор
$sm_read = str_replace("[_id]",$myrow_index[id],$sm_read);//ID постов

return $sm_read;//Выводим с генерированный html код
}

 

Заключение

 

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

Ну что ж, первый серьезный ап нашего блога, не считая прикрутки дизайна Что мы будем делать в следующем посте, пока загадка, даже для меня, поэтому мой совет Вам, подпишитесь на RSS ленту моего блога через браузер или по почте!

Если есть какие вопросы или отзывы, пишите комментарии, обязательно выслушаю/помогу!

Всего Вам самого наилучшего, у меня все!

Исходник
 

Возможно Вам будут интересны следующие заметки

Комментарии (19)

Ваше имя *
Сайт
Ваш E-mail *
Ваше сообщение *
 
AsiaT, 14 Января 2012 г. 12:37 пишет:
Гость
Спасибо !
Скорей больше для вебмастера чем блогеру.
Rio-Shaman, 14 Января 2012 г. 12:40 пишет:
Автор
Одно другому не мешает =) Можно быть и блогером и веб мастером одновременно =)
Ответ для пользователя: AsiaT
Viktor, 14 Января 2012 г. 18:12 пишет:
Гость
Алексей,
именно Ты про меня сказал: "и блоггером и вэб-мастером".
Мне остается только развить Твою мысль: "не только можно, но и
нужно".
Работать мозгами еще никому и никогда не мешало, а многие
из нас используют возможности мозга на 10-15 %. Некоторые -
и того меньше.
А что если взять, да и сменить эту, мягко говоря, неудачную
капчу - раз и навсегда ! Для Тебя это - легкотня, надо только
захотеть.
А если читатель всегда прав, то я уже советую второй раз...
Большое спасибо за все 25 бесценных постов, которые суть-
отличный учебник для молодого блоггера.
Желательно бы знать Твой адрес, если это не коммерческая
тайна. Я их уже устал "вычислять", тратя на эту ерунду
драгоценное время. Порой уходило по пол-часа и более.
Пыхтелкин.
Rio-Shaman, 14 Января 2012 г. 18:49 пишет:
Автор
Капча стоит не просто так, на мой блог был нацелен спам бот, от чего и усложнил форму. Англо спам перестал литься на страницы моего блога, стало быть капча работает. Между прочим у меня еще по божески выглядит, вспомните хотя бы яндексевскую, в мурашки от нее бросает...

Что касается моего почтового ящика, можно полюбопытствовать, зачем он Вам? Ведь если есть какой то вопрос, можно написать через форму "Контакты" или же прям в комментариях...
Ответ для пользователя: Viktor
Ramoni, 06 Июля 2012 г. 21:51 пишет:
Читатель
А кнопка pagebreak работает в редакторе ? А то могут возникнуть проблемы с разрывом статей и кнопкой "читать дальше".
Rio-Shaman, 07 Июля 2012 г. 19:05 пишет:
Автор
В создаваемом движке кнопка "Читать дальше" создается специальным тегом, а не кнопкой редактора.
Ответ для пользователя: Ramoni
Леха, 25 Июля 2012 г. 20:37 пишет:
Читатель
А как кнопка читать дальше взаимодействует с данным редактором?
Rio-Shaman, 26 Июля 2012 г. 09:18 пишет:
Автор
По сути никак. Для появление кнопки "Читать дальше" нужен разделитель - [end]. От редактора ничего не зависит.
Ответ для пользователя: Леха
ynkas, 02 Августа 2012 г. 00:14 пишет:
Гость
А вот про обработчик перед выводом на страницу ничего не написано после установки редактора ;)
Редактор ставит теги типа ..., ... и еще несколько, которые нужно заменять на <b>...</b>, <i>...</i> и т.д. в файлах text.php и news.php
Serega, 13 Августа 2012 г. 11:44 пишет:
Читатель
такая неприятная штука стала появляться после установки визуального редактора, на странице главной, сайта я вижу текст и теги, в редакторе же их не видно а видно тока стиль который они придают ... как этот поправить?
вот смотрите : <p><strong>привет мир</strong></p>
Rio-Shaman, 13 Августа 2012 г. 12:59 пишет:
Автор
Вы скорее всего, в обработчике добавление и редактирование постов, не убрали вот такие строчки кода:

переменая = htmlspecialchars(переменая);

Функция htmlspecialchars() переводит html код в безопасный аналог. В случае использования визуального редактора данные строчки необходимо удалить и позволить движку записать в базу данных рабочий html код
Ответ для пользователя: Serega
Serega, 14 Августа 2012 г. 04:32 пишет:
Читатель
Спасибо за ответ! Да я вчера спать когда лег, решил подумать почему так, и сразу пришла эта мысля в голову =)))
Наталья, 14 Декабря 2012 г. 18:59 пишет:
Гость
Все работает чудесно, только не знаю почему панель с настройками (img, стили, формат, и т.д.) у меня находится над содержанием поста(), а у вас под ней..., но мне это не мешает :) Спасибо!
Максим, 06 Февраля 2014 г. 04:53 пишет:
Гость
Я отказался от этого редактора, его функционал в последней версии, ну совсем не устроил меня..
Вместо него прикрутил CKeditor, гораздо больше пунктов для конфигурации, по дизайну подходит идеально, очень схож с bootstrap, на котором собственно я и делаю дизайн всего что есть в админ панели. Рекомендую поставить его, ну мое личное мнение.

А автору спасибо за статьи!
Ничего особо нового не открыл для себя, но прочитал и совершенствую дальше уже сам)
Дмитрий, 27 Февраля 2014 г. 20:31 пишет:
Читатель
Алексей, редактор установил 4... т.к. Вашей версии на оф сайте не нашел, все работает (редактирует), но после сохранения, обновляю страницу на сайте и ссылки в тексте в виде [урл ....]....[/урл]
Дмитрий, 27 Февраля 2014 г. 23:40 пишет:
Читатель
Всё, разобрался => настройки TinyMCE
Ответ для пользователя: Дмитрий
Дмитрий, 11 Марта 2014 г. 18:51 пишет:
Читатель
Алексей, не могли бы Вы подсказать как связать редактор с папкой картинок (чтобы в редактируемый пост можно было вставлять картинку не прописывая к ней путь)
Дмитрий, 11 Марта 2014 г. 18:59 пишет:
Читатель
Дополню к предыдущему посту:
- а выбирать из списка как в ФМ
Ответ для пользователя: Дмитрий
Алексей, 12 Марта 2014 г. 17:12 пишет:
Автор
как связать редактор с папкой картинок
Честно говоря понятие не имею. Скорее всего никак...
Ответ для пользователя: Дмитрий