опубликовано ETNO в 
Сегодня я расскажу вам о интересном пунктике, который может пригодиться для очень разнообразных задач. Это функционал добавления статей прямо с сайта. Примером использования данного функционала могут быть и социальные сети, и разнообразные каталоги статей, и доски объявлений, да и вообще абсолютно любые формы, хоть и контактная форма.
В нашем случае, этот функционал поможет нам сделать страничку, на которой будет размещена форма добавления статей на сайт, т.е. этим мы можем полностью ограничить доступ пользователей к стандартной админке и дать им возможность писать статьи прямо с сайта.
Начало цикла статей о том как создать социальную сеть на базе wordpress
Итак, первое, что нам нужно – это установить плагин . Самый последний русификатор можно взять .
После установки, нужно произвести некоторые настройки.
Идем в опции плагина – вторая вкладка “записи” – отмечаем галочкой что нужно исправлять автора. Эта функция делает так, чтобы после апрува админом, статья которая будет публиковаться имела автора именно того, кто её добавил, а не админа. По умолчанию, все одобренные статьи будут иметь автора того, кто её одобрил, т.е. админа, а не реального автора, кто её добавил.
С остальными опциями можете поэкспериментировать сами, но обычно я ничего не трогаю здесь.
Далее, в опциях формы указывайте её название, кто имеет право доступа, нужно ли модерировать статьи и т.д. – в принципе ничего непонятного нет.
На следующей вкладке вы должны создать форму, просто перетягивайте нужные виджеты в форму, справа от каждого виджета будет значок
При нажатии будут доступны дополнительные настройки виджетов.
Создаете нужную форму и сохраняйте. Вот ваша форма и готова, при создании формы также будет предложено создать страничку с созданной формой – соглашаемся, если нужно.
Теперь нужно сделать отступление и рассказать как вставить визуальный редактор в форму добавления статей, а также подключить загрузку картинок.
Я перепробовал очень много визуальных редакторов – вообще брал статью с западного блога, где перечислены все виз редакторы и просто пробовал каждый подключать.
Скажу сразу, выбор невелик, в основном все редакторы или слишком просты, или генерируют паршивый код. Изначально выбор пал на NicEdit – подключается одной строкой, легок. Но как глянул его код – вместо тега strong он вставляет span style=”font-weight:bold” – это никуда не годится.
Далее пробовал Tiny MCE знаменитый, но не удалось подключить к нему функционал заливки картинок, так как такой модуль есть, но он платный.
Та же самая проблема и у некоторых отечественных разработок. Вроде код легкий, просто внедрять, нормальный функционал, но функция заливки картинок – проработана очень плохо.
Единственным нормальным вариантом оказался в связке с . 1 – это сам визуальный редактор, 2 – модуль загрузки и обозреватель картинок. Функционал у этого редактора очень обширный, хорошо расписана документация, легко внедряется. Ниже я и расскажу как, чтобы вам время не тратить на поиски.
Сначала, заливаем папку с виз редактором в wp-content, папку с ckfinder заливаем в папку визредактора. Потом, после создания формы в TDO mini forms переходим на вкладку шаблоны – увидите код вашей формы. Вверху добавляем вызов скрипта, обычно это
<script type="text/javascript" src="<?php echo get_bloginfo('url'); ?>/wp-content/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('url'); ?>/wp-content/ckeditor/ckfinder/ckfinder.js"></script>
Далее в шаблоне ищем textarea в который мы и вставим виз редактор. Обычно это
<textarea title="Текст записи" rows="20" cols="40" name="content-text-ta" id="content-text-ta" ><?php if(isset($post_args["content-text-ta"])) {
echo $post_args["content-text-ta"];
} else { ?><?php } ?></textarea>
Как видите id нашей textarea – “content-text-ta” – это нужно записать, дальше это нужно будет
Сразу же после textarea нам нужно вставить вызов редактора. Я сразу вам приведу пример кода вставки визуального редактора и загрузчика картинок.
<script type="text/javascript">
// This is a check for the CKEditor class. If not defined, the paths must be checked.
if ( typeof CKEDITOR == 'undefined' )
{
document.write(
'<strong><span style="color: #ff0000">Error</span>: CKEditor not found</strong>.' +
'This sample assumes that CKEditor (not included with CKFinder) is installed in' +
'the "/ckeditor/" path. If you have it installed in a different place, just edit' +
'this file, changing the wrong paths in the <head> (line 5) and the "BasePath"' +
'value (line 32).' ) ;
}
else
{
var editor = CKEDITOR.replace( 'content-text-ta' );
editor.setData( '<p>Вы можете добавить здесь вашу статью, пользуясь визуальным редактором</p>' );
// Just call CKFinder.SetupCKEditor and pass the CKEditor instance as the first argument.
// The second parameter (optional), is the path for the CKFinder installation (default = "/ckfinder/").
CKFinder.SetupCKEditor( editor, '<?php echo get_bloginfo('url'); ?>/wp-content/ckeditor/ckfinder/' ) ;
// It is also possible to pass an object with selected CKFinder properties as a second argument.
// CKFinder.SetupCKEditor( editor, { BasePath : '', RememberLastFolder : false } ) ;
}
</script>
очень важно в приведенном примере, чтобы ckfinder был загружен в папку с виз редактором, если он у вас загружен в другую папку, то нужно её прописать изменив строку
CKFinder.SetupCKEditor( editor, '<?php echo get_bloginfo('url'); ?>/wp-content/ckeditor/ckfinder/' ) ;
К стати, что мне нравится в этом визуальном редакторе, это то, что можно выводить не все кнопки, которых очень много, а только нужные, как это сделать можно почитать в
После подключения, вам нужно ещё кой чего изменить, чтобы работал загрузчик изображений. В папке cfinder в файле config.php поставить в строчке
function CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system.
// To be able to use session variables don't forget to add session_start().
return true;
}
должно быть true
Далее, ищем значение $baseUrl и в кавычках указываем полный путь с http:// до папки куда нужно загружать картинки и файлы. К стати, папка должна иметь права доступа 777, также иногда внутри папки не создаются нужные подпапки, их нужно вручную сделать. Для картинок нужна папка Images – права доступа тоже 777
Дополнительно также нужно указать полный путь на сервере в значении $baseDir. Пример:
$baseDir = '/var/www/vhosts/сайт.ру/httpdocs/wp-content/ckeditor/ckfinder/userfiles/';
Ну вот и все, теперь должно все работать, а значит на вашем сайте появилась возможность добавлять статьи не заходя в админку.
UPD. не знаю какая уже будет доступна версия редактора на тот момент, когда будете ставить, но заметил один глюк (и не только я), что последняя версия ckeditor не хочет работать с последней версией ckfinder. Если вы уверены, что сделали все правильно, но загрузка не работает (нет вообще такой вкладки) – то попробуйте установить не последнюю версию ckfinder, а предпоследнюю
Понравилась статья? - Подпишись.
Или поделись полезным с миром
Похожие статьи:
Привет, полезная статья, но есть один вопрос:
при добавлении изображения выскакивает окно, но там поле только для URL-а, разве нет такой возможности, чтобы добавить изображение со своего компьютера, а не только с других сайтов?
если делать как я описывал в статье – то есть, нужно просто перейти на вкладку “закачать”
Частичный ответ нашёл здесь , вкладка появилась, но загружать нормально не хочет, после загрузки выдаёт iframe в котором открывает страницу /undefined. Если же просто указать url файла с какого-нибудь сайта, то загружает нормально. Может сможете выложить свои исходники для проверки?
так я в статье и выложил рабочие исходники, которые работают уже на 4 сайте на wp на 3 разных хостингах. очень важно в файле config.php прописать baseurl и внести все коррективы как я описывал в конце статьи.
Спасибо за цикл статей, добрался по пунктам до этой статьи.
Возник маленький вопрос:
возможность добавлять статьи не заходя в админку появилась, все нормально, НО где/как увидеть в редакторе кнопку для загрузки/добавления изображений? Ссылку на изображение принимает, но “загрузчика” не видно…
И вообще, мб действительно исходником поделишься, а то уже у второго не работает. Пробовал на вин и линукс серваках
– проверьте отображается ли у вас третья картинка в этой статье. И ещё раз скажу – чтобы работал загрузчик изображений, нужно скачать с сайта и ckfinder и положить его в папку где и ckeditor – и вставлять код как я описывал статье + настроить config.php как я описывал
Кнопка с рисунком есть, но вкладки “загрузить” — нету. Прописал hidden: false — не помогло.
Мб еще раз для примера пробежимся?
>$baseUrl и в кавычках указываем полный путь с http:// до папки куда нужно загружать картинки и файлы
Например:
$baseUrl = “http://example.org/users/images/”;
>Для картинок нужна папка Images – права доступа тоже 777
Вот тут не понятно. Масло масленое?
>указать полный путь на сервере в значении $baseDir
Например:
$baseDir = ‘/var/www/vhosts/example.org//users/images/’;
Ведь такая логика?
Все сделал строго по примеру.
Мб когда была написана статья версия CKEditor и CKFinder были другие?
example.org// – одначерта, опечатался, исправьте, плиз
>Для картинок нужна папка Images – права доступа тоже 777 в папке куда нужно загружать картинки по умолчанию очень часто не создаются подпапки, их нужно создать вручную. Для картинок это папка Images, права на неё должны быть 777.
и да, версии были другие. к стати, однажды у меня новый ckfinder не работал на новом ckeditor – когда поставил ckfinder на одну версию ниже – тогда все ок стало, попробуйте тоже так.
Танцы с бубном =)
Разобрался чек чему:
1. Нужен старее CKFinder 1.4.3 от 2010.02.18
2. FCKeditor 2.6.6 (самый новый)
Тогда все работает.
Еще раз спасибо за цикл статей, это шедевр!
вот это у меня было так же. но тогда я ещё юзал бетку, думал из-за этого. Счас в статью внесу правки
За ссылку спасибо. Поделюсь своими результатами:
CKFinder 1.4.3 и CKeditor 3.4
В настройках CKFinder config.php в переменной $baseDir указал относительный путь от корня сайта, заключённый в функцию resolveUrl, если указывать просто полный путь (навроде ‘/var/www/vhosts/example.org/users/images/’) или убрать функцию, то пишет про проблему с правами и не закачивает
$baseDir = resolveUrl(‘/wp-content/uploads/’);
Так же, если хочется убрать надоедливую надпись “This is the demo version of CKFinder.” при просмотре имеющихся изображений, то в файле config.php надо указать строчки:
$config['LicenseName'] = $_SERVER['HTTP_HOST'];
$config['LicenseKey'] = ‘C1234567A89BC’;
спасибо, думаю многим будет полезно это узнать
Угу, сегодня закачал на хостинг (monsterhost.com), не работало без resolveUrl.
Спасибо за подсказку =)
День добрый! Помогите! Второй день не могу исправить шаблон формы, когда пытаюсь “впихнуть” редактор. Пишет, что шаблон сохранен, но на деле ничего не происходит – редактор не отображается и изменений кода формы нет. Права доступа на всю папку с плагином и редактором выставил 777.
У меня тоже была такая проблема:
1. Установил 3 ВП
2. Скопировал “Шаблон формы” с локального сервака и все заработало.
У меня есть предположение, что иногда сама форма создается криво, попробуйте заново создать простую форму.
Спасибо за статью. Столкнулся с проблемой, что когда в виджетах не отображается кириллица. Если латиница – то можно изменить заголовок виджета и текст внутри, а с кириллицей просто пустые строки или ???????? вопросы место букв.
Не редактируется шаблон формы. Никак. ЧТо делать?
1) Вы пишите: “Как видите id нашей textarea – “content-text-ta” – это нужно записать, дальше это нужно будет”
- Зачем это нам нужно будет? Дальше вы нигде в статье это не используете.
2) Вы пишите:
“Сразу же после textarea нам нужно вставить вызов редактора. Я сразу вам приведу пример кода вставки визуального редактора и загрузчика картинок.”
- После закрытия textarea ??? Или куда именно?
вы плохо смотрели приведенные примеры. в первом случае, запоминать id нам нужно для того, что мы делаем вызов визуального редактора подставляя в него этот id – в коде это есть. И да, после закрытия textarea
1. Почему мы редактор ставил уже после textarea? Получается редактор внизу поля ввода, а надо бы вверху.
2. Вы пишите “id нашей textarea – “content-text-ta””. То есть если у меня также называется, то код внизу можно не менять? (“Я сразу вам приведу пример кода вставки визуального редактора и загрузчика картинок.”)
Вставить после textarea и всё заработает (кроме вставки картинок)?
Я так всё и сделал, но не отобразился редактор, помогите. WP 3.01 Локалхост, денвер, пробовал несколько тем, FCKeditor 2.6.6, CKFinder 1.4.3 в папке wp-content.
Хелп ми, инетерсно, почему не работает? Может из-за версии плагина TDO 0.13.9 (в нем кстати есть свой редактор, небольшой и с вставкой картинок с урела)???
1. да
2. да
3. иногда говорят, что не работают новые версии FCK, попробуйте поставить предыдущую. Но в любом случае, обычно не работает вставка картинок, сам же редактор должен подключаться без проблем
Что делать, если все изменения в шаблоне не сохраняются? Я нажимаю сохранить, а он сбрасывает изменения.
Полезно – обязательно сегодня попробую!
Вопрос: У вас в форме на картинке плагина TDO mini forms выбрано “Брать рубрику GET из переменных”, а перед ней Категории. Категорию выбрать это понятно, а первое что делает (“Брать рубрику GET из переменных”)?
Обясните поподробнее, если не сложно.
я не совсем программист, но думаю, что это просто вызов переменных, т.е. конкретно на результат это не влияет, но я всегда так делаю.
Честно говоря, ничего не понял! Создал шаблон формы, осуществил настройки. А где сама форма находится? Где зарегистрированному пользователю её увидеть?
когда создаете форму, то плагин предложит вам создать автоматически и страницу, где будет находиться эта форма. Или же можно будет вставить её на любую страницу, для этого в текст нужно будет вставить специальный тег с именем формы
У меня получилось встроить редактор в форму для создания новой статьи. Все без проблем. Но не получается корректно вставить редактор для редактирования статьи. При формировании страницы в форме textarea должен заменяться сгенерированным кодом js. Если я пробую вставить editor.setData( ‘post_content; ?>’ );
То видимо из-за некорректного js кода редактор не встраивается. Если я вставляю такой код editor.setData( ‘post_content); ?>’ );
то редактор вставляется с html кодом в обычном режиме просмотра, а в режиме “Источник” отображаются преобразованный html код. Вопрос: есть ли способ вставить корректный текст записи, чтобы он правильно отображался и в режиме “исходник”?
часть кода php не отобразилась должно быть
editor.setData ( ‘ post_content ; ? > ‘ ); и
editor.setData ( ‘ post_content ) ; ? > ‘ ); соответственно
Решение оказалось гораздо проще, чем я думал. На самом деле не нужно добавлять данные после того как редактор “появился” на странице, а нужно просто создать textarea с нужным html кодом и при вызове .replace() этот код автоматически вставится в редактор.
Прошу помощи установил CKEditor 3,6 но там нету кнопки для вставки тега more!!!не как прикрутить не получается эту кнопку,помогите пожалуйста!
не сталкивался с этим, но я бы попробовал так – в редакторе есть возможность вставлять разрыв строки, только там вставляется не more, а какая-то ерунда, вот нужно посмотреть, что именно вставляется, далее взять текстовый редактор с возможностью поиска текста по группе файлов и найти ту, строку, которая указывает, что вставлять при нажатии на эту кнопку, ну и заменить на more.
И почему то в опере нормально а в мазиле и эксплоере ошибка:
Error: CKEditor not found.
This sample assumes that CKEditor (not included with CKFinder) is installed in’
‘the “/ckeditor/” path. If you have it installed in a different place, just edit’
‘this file, changing the wrong paths in the <head> (line 5) and the “BasePath”‘
‘value (line 32).’
судя по ошибке вы не загрузили CKFinder или неправильно указали его местонахождение в файле конфига
Здравствуйте, у меня следующий вопрос: возможно ли встроить форму добавления статей на сайт на отдельной странице, а не в виджете. Виджет ставится в сайдбаре, а там очень мало места для редактора. Или что-то не понимаю?
она и вставляется на отдельной странице – как только создаете форму через плагин, он автоматом создает страницу с формой
Добралась до третьей статьи, работа уперлась в проблему с TDO mini forms – плагин не устанавливается на хостинг, в сети много упоминаний про некорректную работу этого плагина (как предполагается по причине несовместимости с новой версией WP).
У вас все работает?
Есть ли альтернатива этому плагину?
недавно обновлял один сайт до последней версии и TDO на нем нормально работает. альтернативы есть – gravity forms – еще лучше, но он платный. Был еще какой-то который позволяет пользователям добавлять статьи – community news вроде назывался, как-то так
Да, плагин встал нормально.
Возникла проблема с появлением вместо аватарки части кода.
В общем, на данный момент поняла, что лучше заплатить веб-мастеру, и он все решит)
Спасибо за ответ!
а точно тот код вставляли? Я вот недавно обновил сайт где стоял этот код до последней версии – и все нормально работает, значит дело не в совместимости, как я раньше думал. Может кавычки неправильные где-то?