На днях мне поступил заказ сделать сайт, и вот по истечении срока, работа была выполнена. Но не тут то было, заказчик посмотрев сайт претензий не нашел, но т.к в админке при добавлении статей было простое поле, с возможностью вставки Html тегов. Заказчик в виду не знания языка HTML попросил обновлять сайт, я конечно отказался т.к времени у меня на это темное дело нет. Но вопрос оставался открытым, и я пришел к выводу что нужно на сайт установить редактор. Порывшись в интернете из всех редакторов, само больше мне понравился CKEDITOR.
Конечно я поставил этот редактор на сайт, заказчик был очень доволен. Поэтому в этих уроках (их будет два) мы поговорим об установке настройки и успешного использования текстового редактора CKEDITOR у вас на сайте. В первой части мы прикрепим его к нашему сайту, и настроим отображение, а во второй познакомимся с непосредственным выводом текста в базу и из базы данных.
Что же такое визуальный редактор? С помощью визуального редактора встроенного в сайт очень легко и удобно добавлять и редактировать различную информацию.
Например его можно использовать в форме добавления комментариев или новостном блоке, не говоря уже о применении его в администраторском разделе.
Папка _samples содержит примеры использования редактора. В папке _source находятся все исходные коды редактора, предназначенные для разработчиков. Мы можем смело удалить обе папки, а так же файлы отмеченные серым цветом. После проделанных операций размер основного каталога уменьшится вдвое. На следующем этапе необходимо вставить между тегами <head> и </head> следующую строчку:
PHP код:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
Для установки ckeditor`a вам нужно его скачать сделать это можно на официальном сайте программы
ckeditor.com. После скачивания архива необходимо распаковать его в какую-либо папку в корневой директории сайта. После распаковки каталог будет иметь такой вид:
Атрибут src должен содержать полный путь к файлу ckeditor.js Далее нам нужно создать форму с областью текста (тег< textarea>) и добавить в неё несколько строк кода:
<form id="form1" name="form1" method="post" action="">
<textarea name="editor1" id="editor1" cols="45" rows="5"></textarea>
<script type="text/javascript">
CKEDITOR.replace( ‘editor1′);
</script>
</form>
Вот и все, наш визуальный редактор готов к работе. Если мы не вносим изменения в файл config.js, то по умолчанию наш редактор будет иметь вид показанный на картинке ниже.
Следует сказать, что в файл config.js можно вносить огромное количество изменений, тем самым настраивая редактор для своих личных нужд. К сожалению вся документация к Ckeditor на английском языке. На этом мы закончим этот урок, а во втором уроке уже поговорим как связать CKEditor с БД.
Во второй части мы поговорим уже о взаимодействии CKEditor с БД. И так отобразив CKEditor нужно. Для начала у вас должна быть БД, которая имеет следующий вид:
PHP код:
CREATE TABLE `new_articles` ( `id` int(5) NOT NULL auto_increment, `title` varchar(15) NOT NULL, `meta_k` varchar(15) NOT NULL, `date` date NOT NULL, `author` varchar(15) NOT NULL, `code` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=16 DEFAULT CHARSET=cp1251 AUTO_INCREMENT=16 ;
Данная таблица предназначена для следующей формы:
PHP код:
<p> <label>Введите название статьи<br> <input type="text" name="title" id="title"> </label> </p> <p> <label>Введите ключевые слова для статьи<br> <input type="text" name="meta_k" id="meta_k"> </label> </p> <p> <label>Введите дату добавления статьи<br> <input name="date" type="text" id="date" value="2007-01-27"> </label> </p> <p> <label>Введите автора статьи<br> <input type="text" name="author" id="author"> </label> </p> <div id="editor"> <p>Текст статьи</p> <textarea name='code'> <?php include ("config.php"); $sql= "SELECT code FROM new_articles WHERE id=$id"; $result1 = mysql_query($sql); $itog = mysql_fetch_assoc($result1); echo $itog["code"]; echo "</textarea>"; <script type="text/javascript"> CKEDITOR.replace( 'code' ); </script> </div> ?> <p> <input type="submit" value="добавить"/> <input type="Reset" value="отмена"> </p> </form>
Смотря внимательно, сразу бросаются в глаза следующие строки:
PHP код:
<?php include ("config.php"); $sql= "SELECT code FROM new_articles WHERE id=1"; $result1 = mysql_query($sql); $itog = mysql_fetch_assoc($result1); echo $itog["code"]; echo "</textarea>"; <script type="text/javascript"> CKEDITOR.replace( 'code' ); </script> </div> ?>
Здесь именно в этих строках и заключается основы подключения CKEditor. В вышеописанном коде мы вытаскиваем из БД new_articles статью с ID 1, после чего передаем её в наш текстовый редактор. Таким же образом мы можем и внести статью в БД с помощью CKEditor.
Делается это следующим образом:
Форма:
PHP код:
<form method="POST" action="article.php"> <center> <p> <label>Введите название статьи<br> <input type="text" name="title" size=115 height=5 id="title"> </label> </p> <p> <label>Введите ключевые слова для статьи<br> <input type="text" name="meta_k" id="meta_k"> </label> </p> <p> <label>Введите дату добавления статьи<br> <input name="date" type="text" id="date" value="2010-08-07" onFocus="doClear(this)"> </label> </p> <p> <label>Введите автора статьи<br> <input type="text" name="author" id="author"> </label> </p> <center><div id="editor"> <p>Текст статьи</p> <textarea name="code">Введите текст:</textarea> <script type="text/javascript"> CKEDITOR.replace( 'code' ); </script> </div> </center> <p> <input type="submit" value="добавить"/> <input type="Reset" value="отмена"> </p> </form>
Обработчик:
PHP код:
<?php //Соединение с БД include ("config.php"); //Устанавливаем кодировку СР-1251 по умолчанию mysql_query("SET NAMES cp1251"); if(!$_POST ['title']) { echo"Вы не ввели заголовок статьи!"; } else { $id=$_POST['id']; $title=$_POST ['title']; $meta_k=$_POST['meta_k']; if (!$_POST['date']) { echo "Вы не ввели дату"; } else { $date=$_POST['date']; } $author=$_POST['author']; //Проверяем нажата ли кнопка if (isset($_POST['code'])) { $code=$_POST['code']; $result = mysql_query ("INSERT INTO new_articles(id,title,meta_k,date,author,code) VALUES ('$id','$title','$meta_k','$date','$author','$code') "); if($result == 'true') { echo "<b>Данные успешно добавлены</b><br />"; echo "<a href='../index.php'>Перейти на главную</a>"; exit; } else { echo "Ошибка при добавлении в БД"; } } } ?>
Если сказать коротко о обработчике, то тут все предельно просто выполняется инструкция if в которой проверяем существует ли переменная title (т.е введен ли заголовок статьи), если заголовок не введен то инструкция истина и в этом случае выводится текст :
Вы не ввели заголовок статьи!, если же заголовок введен то сразу переходим к инструкции else и выполняем код :
PHP код:
if (isset($_POST['code'])) { $code=$_POST['code']; $result = mysql_query ("INSERT INTO new_articles(id,title,meta_k,date,author,code) VALUES ('$id','$title','$meta_k','$date','$author','$code') "); if($result == 'true') { echo "<b>Данные успешно добавленны</b><br />"; echo "<a href='../index.php'>Перейти на главную</a>"; exit; } else { echo "Ошибка при добавлении в БД"; }
Здесь как только вы нажали кнопку отправить вся информация, введенная вами в форму CKEditor будет передана в БД!
В конце концов, у вас должно получится!
17.07.2011, 16:07
Установка и использование Сkeditor
Линейный вид
