FCKeditor — установка
Сегодня я расскажу, как установить и настроить данный редактор. FCKeditor — это бесплатный, свободно распространяемый WYSIWYG редактор. По-большому счёту, вся необходимая информация присутствует в полном объёме на сайте, однако там порой приходится очень много прочитать страниц, чтобы найти что-то именно нужное.
На данный момент стабильная версия редактора — 2.6.4. Просто идём раздел «Download» и скачиваем удобный для нас формат распространения: *.zip или *tar.gz.
Для того, чтобы начать использовать редактор, его просто необходимо подключить к страницам своего проекта. Существует реализации почти для десятка языков программирования, но я хочу остановиться на двух: php и javascript.
Для начала о реализации на php.
1. Подключаем необходимый файл:
<?php
include_once("fckeditor/fckeditor.php") ;
?>
2. Теперь мы уже можем использовать редактор. Для этого просто добавляем
следующий код внутри <FORM>:
<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = '/fckeditor/' ;
$oFCKeditor->Value = '<p>This is some <strong>sample text</strong>.
You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>' ;
$oFCKeditor->Create() ;
?>
3. Вот и всё. Ниже код полностью:
<?php
include_once("fckeditor/fckeditor.php") ;
?>
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="sampleposteddata.php" method="post" target="_blank">
<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = '/fckeditor/' ;
$oFCKeditor->Value = '<p>Тут что-то написать</p>' ;
$oFCKeditor->Create() ;
?>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Тааак... теперь всё то же самое реализуем при помощи javascript:
1. Опять же для начала необходимо подключить соответствующий файл:
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
2. Использовать можно разными способам:
а) включить следующий код внутри используемой формы:
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "/fckeditor/";
oFCKeditor.Create();
</script>
б) Между тегами <HEAD> и </HEAD> необходимо поместить следующий код:
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
Т.е. при создании странички будет создано окно редактора.
Однако в теле страницы <BODY> необходимо разместить область <TEXTAREA>
с именем "MyTextarea":
<textarea id="MyTextarea" name="MyTextarea">Пишем тут.</textarea>
в) если вы используете технологию AJAX, то процесс создания окна редактора
несколько иной:
var div = document.getElementById("myFCKeditor");
var fck = new FCKeditor("myFCKeditor");
div.innerHTML = fck.CreateHtml();
Вот, в принципе, и всё, что касается установки FCKeditor. О огромном
количестве настроек вы сами можете прочитать на страничке с их описанием.
В следующий раз расскажу о том, как изменить внешний вид окна редактора,
чтобы подогнать его под свой дизайн.
Недавние записи
- Long time no see
- Ошибка при обновлении Meteor до версии 1.4.2
- Patch falcon для ruby-1.9.3-p327
- Ускоряем ruby и Rails
- Gem ‘seo_params’: определение основных параметров
- Отрицательный margin-top и Opera
- Rspec and Devise reset password
- Backbone.js: Views. Часть первая.
- Backbone.js: Models and Collections
- Backbone.js Routers
Апрель 30th, 2009 at 09:51
Я хочу оставить файлы для работы только с PHP. Что можно смело удалять а что можно оставить?
Июнь 16th, 2009 at 13:41
А как мне получить код, полученный в итоге
Сентябрь 21st, 2009 at 15:33
В файле sampleposteddata.php написать:
Сентябрь 30th, 2010 at 19:40
Ну ты и «дизайнер такими буквами да на таком фоне….. Разуй глаза, нихрена не видно же!!!!!!!!!!!!!!!!!
Октябрь 18th, 2010 at 00:37
Поднял проект на Xampp. Решил прикрутить CKEditor, а он отрисовывается на странице с помощью Iframe.
Вместо своего CKEditor вижу 404 NotFound. Создавал вручную iframe — тоже самое. Явно проблема в Xampp — iframe.
На хостинге проблемы нет.
Апрель 13th, 2011 at 13:30
Спасибо, юзаем новый CKEditor. Вещь классная!
Апрель 28th, 2011 at 11:19
Что то не могу ни как подключить используя именно Ваш пример
Июль 23rd, 2011 at 15:07
Подскажите в каком файле можно настроить путь для загрузки изображений.
Август 28th, 2012 at 09:45
Добрый день,
необходимы профессиональные консультации по пользованию программой
Правщика сайтов FCKEditor, которые необходимо оперативно предоставлять
по телефону/Скайпу. Вы сможете оказать подобные услуги? Оплату
предлагаем делать авансом за первые часы/дни, а в дальнейшем — по
договоренности.
Спасибо.
Август 29th, 2012 at 09:56
Что-то я ничего не понял, если честно (-:
Февраль 18th, 2013 at 13:51
ВНИМАНИЕ!
Папка ckeditor в версии выше 4.0.0 должна быть в корневой папке сайта, а не где угодно, как это возможно например с ckeditor 3.6.6
Февраль 18th, 2013 at 14:08
«Это не есть факт», как говорили в одном советском фильме.
Вот что на этот счёт говорит официальная документация:
To install CKEditor for the first time, proceed in the following way:
Download the latest version from the CKEditor website: http://ckeditor.com/download
Extract (decompress) the downloaded archive to a directory called ckeditor in the root of your website.
You can place the files in any path of your website. The ckeditor directory is the default one.