Сегодня я расскажу вам о интересном пунктике, который может пригодиться для очень разнообразных задач. Это функционал добавления статей прямо с сайта. Примером использования данного функционала могут быть и социальные сети, и разнообразные каталоги статей, и доски объявлений, да и вообще абсолютно любые формы, хоть и контактная форма.
В нашем случае, этот функционал поможет нам сделать страничку, на которой будет размещена форма добавления статей на сайт, т.е. этим мы можем полностью ограничить доступ пользователей к стандартной админке и дать им возможность писать статьи прямо с сайта.
Начало цикла статей о том как создать социальную сеть на базе 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-а, разве нет такой возможности, чтобы добавить изображение со своего компьютера, а не только с других сайтов?
Возник маленький вопрос:
возможность добавлять статьи не заходя в админку появилась, все нормально, НО где/как увидеть в редакторе кнопку для загрузки/добавления изображений? Ссылку на изображение принимает, но «загрузчика» не видно…
$baseUrl = «http://example.org/users/images/»;
Вот тут не понятно. Масло масленое?
Например:
$baseDir = ‘/var/www/vhosts/example.org//users/images/’;
Все сделал строго по примеру.
Мб когда была написана статья версия CKEditor и CKFinder были другие?
Разобрался чек чему:
CKFinder 1.4.3 и CKeditor 3.4
В настройках CKFinder config.php в переменной $baseDir указал относительный путь от корня сайта, заключённый в функцию resolveUrl, если указывать просто полный путь (навроде ‘/var/www/vhosts/example.org/users/images/’) или убрать функцию, то пишет про проблему с правами и не закачивает
$config['LicenseName'] = $_SERVER['HTTP_HOST'];
$config['LicenseKey'] = ‘C1234567A89BC’;
Спасибо за подсказку =)
1. Установил 3 ВП
2. Скопировал «Шаблон формы» с локального сервака и все заработало.
У меня есть предположение, что иногда сама форма создается криво, попробуйте заново создать простую форму.
- Зачем это нам нужно будет? Дальше вы нигде в статье это не используете.
«Сразу же после textarea нам нужно вставить вызов редактора. Я сразу вам приведу пример кода вставки визуального редактора и загрузчика картинок.»
- После закрытия 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 (в нем кстати есть свой редактор, небольшой и с вставкой картинок с урела)???
2. да
3. иногда говорят, что не работают новые версии FCK, попробуйте поставить предыдущую. Но в любом случае, обычно не работает вставка картинок, сам же редактор должен подключаться без проблем
То видимо из-за некорректного js кода редактор не встраивается. Если я вставляю такой код editor.setData( ‘post_content); ?>’ );
то редактор вставляется с html кодом в обычном режиме просмотра, а в режиме «Источник» отображаются преобразованный html код. Вопрос: есть ли способ вставить корректный текст записи, чтобы он правильно отображался и в режиме «исходник»?
editor.setData ( ‘ post_content ; ? > ‘ ); и
editor.setData ( ‘ post_content ) ; ? > ‘ ); соответственно
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).’
У вас все работает?
Есть ли альтернатива этому плагину?
Возникла проблема с появлением вместо аватарки части кода.
В общем, на данный момент поняла, что лучше заплатить веб-мастеру, и он все решит)
Спасибо за ответ!