Установка и использование Сkeditor - NoRResT-TeaM FORUM
NoRResT-TeaM FORUMNoRResT-TeaM FORUM
Расширенный поиск
  NoRResT-TeaM FORUM
Articles Пользователи Поиск Сообщения за день Все разделы прочитаны
Запросы Все темы форума Справка Поиск Армия Календарь


   
Меню сайта:
Главная
Форум
Галерея
Новости
- Другие ресурсы:
- Чат
- Сетевой торрент
- Сетевой сайт
- Доска обьявлений
FTP:
Video FTP
Game FTP
Music FTP
Soft FTP
Homer FTP
- Разное:
- UTM-Статистика
- Photoshop Online
- FAQ
- Игры
- Палитра Цветов

Вернуться   NoRResT-TeaM FORUM > Скрипты > Joomla > Разное

Ответ
 
Опции темы Опции просмотра
  #1  
Старый 17.07.2011, 15:07
Аватар для jakal
Administrator
 

Регистрация: 04.11.2008
Адрес: yarss.php
Сообщений: 510
Сказал(а) спасибо: 1
Поблагодарили 6 раз(а) в 6 сообщениях
KL$: 6,860
jakal has much to be proud ofjakal has much to be proud ofjakal has much to be proud ofjakal has much to be proud ofjakal has much to be proud ofjakal has much to be proud ofjakal has much to be proud ofjakal has much to be proud of
По умолчанию Установка и использование Сkeditor

На днях мне поступил заказ сделать сайт, и вот по истечении срока, работа была выполнена. Но не тут то было, заказчик посмотрев сайт претензий не нашел, но т.к в админке при добавлении статей было простое поле, с возможностью вставки 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` (   `idint(5NOT NULL auto_increment,   `titlevarchar(15NOT NULL,   `meta_kvarchar(15NOT NULL,   `datedate NOT NULL,   `authorvarchar(15NOT NULL,   `codetext 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 будет передана в БД!
В конце концов, у вас должно получится!
__________________
Администрация оставляет за собой право кастрировать участников форума

Ответ

Социальные закладки

Метки
использование, сkeditor, установка

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Текущее время: 22:55. Часовой пояс GMT +2.


Powered by vBulletin® Version 3.8.6
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot
Время генерации страницы 0.19250 секунды с 18 запросами