Joomla 1.5: Создание плагина smilies
| Индекс материала |
|---|
| Joomla 1.5: Создание плагина smilies |
| Создание плагина Joomla стр.2 |
| Создание плагина Joomla стр.3 |
| Все страницы |
В данной заметке я хочу осветить создание плагина для CMS Joomla 1.5. Плагин будет работать с контентом, а конкретно заменять некий набор символов на соответствующую картинку, в нашем случае вставлять в контент смайлы. Здесь я опишу процесс и свою методику разработки. Так же будут показан один нтересный, нестандартный приём разработки. Эта статья рассчитана на людей более - менее знакомых с CMS Joomla 1.5, и хоть немного понимающих её работу на уровне исходного кода. Готовый плагин можно скачать в конце статьи.
Заметил я за собой нехорошую привычку: ставить смайлики в текст, правда хрен ли от них толку, если они так текстом и остаются. И раз уж я страдаю такой хернёй, то почему бы не написать под это дело плагин, который будет приводить символьное представление смайликов в графическое?
Тут стоит заметить что визуальными html редакторами самого движка Joomla 1.5 - я не пользуюсь по нескольким причинам: во-первых они пока не могут дать приемлемый html код, во-вторых они глючат, и что больше всего всего раздражает - завёртывают содержимое тегов script в контенте - в блоки CDATA, и скрипты естественно, после такого отношения к себе не работают. Теперь я просто набираю статьи в декстопном редакторе, а потом просто копирую их в движок. Поэтому плагин будем делать не ввиде кнопки для редактора, а ввиде самостоятельного механизма.
Я для себя решил, что плагин должен быть расширяемым/универсальным. Т.е. в процессе эксплуатации мы должны иметь возможность добавлять новые сочетания символов как то:
:P
:0) и т.п. и сопоставлять нужные им картинки. Название плагину я решил дать незамысловатое: Smilies. На самом деле получается, что сопоставить символам мы сможем любое изображение. :)
Спасибо разработчикам Joomla 1.5 за то что они любезно предоставили файлы примеров для создания плагинов! В Joomla 1.5 есть несколько типов плагинов:
- authentication
- content
- editors
- editors-xtd
- search
- system
- tmp
- user
- xmlrpc
Эти типы так же являются именами директорий плагинов, которые в свою очередь находятся в директории plugins - что в корне движка. Примеры плагинов находятся в каждой из этих директорий, и называются example.php и example.xml
В Joomla 1.5 плагины можно создать несколькими способами, но мне "ближе к телу" ООП - реализация, её я и буду использовать в данной статье. Плагин я назвал "Smilies", значит файл плагина и манифеста называем соответсвенно: smilies.php и smilies.xml - создадим их пока, где нибудь на компе и сохраним в кодировке UTF-8. Так же создадим папку smilies и поместим в неё ещё два файла: collation.txt * и заглушку index.html
* - тут следует пояснить, что плагины в Joomla 1.5 не могут создавать таблицы в базе данных при установке, по крайней мере у меня не получилось сделать это стандарным способом т.е. поместив в xml - манифест такие строки:
<install>
<sql>
<file charset="utf8" driver="mysql">install.utf8.sql</file>
<file driver="mysql">install.sql</file>
</sql>
</install>
- и создав соответственно файлы install.utf8.sql и install.sql Но информацию то по сопоставлению символ - картинка надо где то хранить. Я решил не извращаться и хранить эту инфу в файле collation.txt - особо важной инфы в нём всё равно не будет, а работать с текстовыми файлами php умеет хорошо. На самом деле сначала я рассматривал вариант с расширением .ini но отказался от него - слишком много ограничений.
Файл манифеста попросту переправим под себя из примера plugins/content/example.xml, но это только сначала. Так как мы предполагаем расширение плагина новыми смайлами, а по сути мы дадим пользователю с самого начала указывать пары: символ - картинка, значит, если думать в рамках GUI то это должна быть своего рода строка... таблицы, где будет текстовое поле, рядом выпадающий список с файлами картинок, и здесь же кнопки для добавления/удаления новой такой же строки интерфейса:
Такого элемента интерфейса Joomla 1.5 не предоставляет, а жаль... ну, ничего - сделаем его сами. Причём здесь явно пахнет Javascript - ом.
В xml - теге install добавим атрибут method="upgrade" для того, что бы после установки плагина, когда мы продолжим разрабатывать его мы бы могли загружать новые версии не удаляя старую. Т.е. производить upgrade. В теге files пропишем наш файл smilies.php (smiles.xml - не обязательно) + укажем папку smiles
Файл smiles.xml:
<?xml version="1.0" encoding="utf-8"?> <install version="1.5" type="plugin" group="content" method="upgrade"> <name>Content - Smilies</name> <author>Moskitos80</author> <creationDate>07-10-2011</creationDate> <copyright>Copyright (C) 2011 - 2012. All rights reserved.</copyright> <license>GNU/GPL</license> <authorEmail>moskitos80@gmail.com</authorEmail> <authorUrl>/</authorUrl> <version>1.0</version> <description>Преобразует заданные символы в контенте в соответствующие смайлики</description> <files> <filename plugin="smilies">smilies.php</filename> <folder>smilies</folder> </files> </install>
Итак, на данный момент где то на компутере мы имеем два файла: smilies.php и smilies.xml а так же папку: smilies и в ней тоже 2 файла: collation.txt и index.html. В нашей разработке мы будем использовать ООП подход, а при таком раскладе нам нужно в главном файле плагина - это smilies.php описать класс с именем: plg(тип)(ИмяПлагина) т.е. в нашем случае: plgContentSmilies - потому, как тип нашего плагина "Content". Этот наш класс должен расширять Joomla - класс JPlugin (это касается плагинов любого типа). Если смотреть файл примера в движке: /plugins/content/example.php, то там класс имеет методы:
- onAfterContentSave
- onAfterDisplayContent
- onAfterDisplayTitle
- onBeforeContentSave
- onBeforeDisplayContent
- onPrepareContent
Плагины папки content, обрабатывают контент, после того, как движок его уже достал из базы, но перед тем, как он выводится на экран. Самое "популярное" событие - onPrepareContent. Оно запускается первее всех.
Так вот методы, которые я привёл в списке выше - фактически являются обработчиками событий, происходящих с контентом, если приглядеться к их названиям, они сами говорят, какие события они обрабатывают. Нас интересует естественно onPrepareContent. В нашем классе мы "перегрузим" имеено его, и он будет единственным. Снизу листинг файла smilies.php :
// Защита от прямого доступа:
defined('JPATH_BASE') or die ('Restricted access');
// Импортируем файл с классом, что бы JPlugin стал нам доступен:
jimport( 'joomla.plugin.plugin' );
class plgContentSmilies extends JPlugin
{
function onPrepareContent( &$article, &$params, $limitstart)
{
}
}
На данный момент мы имеем следующую структуру:
smilies.php smilies.xml smilies/collation.txt smilies/index.html
Причём содержание у нас сейчас имеют только два файла это smilies.php и smilies.xml - на данный момент этого вполне хватит. Теперь возьмём все эти файлы и папку и поместим в zip - архив, и обзовём его соответственно: smilies.zip
Рискну заметить, что если вы читаете эту статью у вас должен быть установлен локальный веб сервер, или какая нибудь другая тестовая площадка для сайтов. Желательно иметь установленную рабочую копию движка Joomla 1.5
Открываем админку нашего тестового сайта на Joomla. И загружаем наш недоделанный плагин. Топаем в расширения->менеджер плагинов и выбираем свой плагин ( Content - Smilies ), и публикуем его.
Теперь мы будем работать с уже установленным плагином, в директории плагинов, в движке - так мы сможем контролировать процесс разработки, и что бы удостовериться, что мы всё еще понимаем, что делаем - открываем файл: ...\plugins\content\smilies.php И добавляем в него пару строчек, теперь он должен выглядеть так:
// Защита от прямого доступа:
defined('JPATH_BASE') or die ('Restricted access');
// Импортируем файл с классом, что бы JPlugin стал нам доступен:
jimport( 'joomla.plugin.plugin' );
class plgContentSmilies extends JPlugin
{
function onPrepareContent( &$article, &$params, $limitstart)
{
echo '<h1>РАБОТАЕТ!!!</h1>';
return true;
}
}
Затем откройте какую нибудь статью на своём сайте, и если вы до сих пор всё делали правильно, то вы должны увидеть надпись "РАБОТАЕТ!!!", в самом верху, там, где выводится контент. Если нет, то проверяем, что не забыли опубликовать плагин, и что он вообще установился.
Следующим нашим шагом будет разработка интерфейса админа. Где же нам взять такой чудо-элемент, картинку которого я привел выше. Как я уже говорил Joomla 1.5 ничего подобного не предоставляет, но мы можем создать свой элемент управления.
Здесь мне видится такой выход: мы создадим свой элемент управления - frame, он будет выводить html-элемент IFRAME, который будет отображать ещё один наш файл, в котором мы уже сможем создать любой функционал, не взирая на ограничения движка Joomla. Итак, нужно добавить следующие строчки в файл манифеста smilies.xml :
<params addPath="/plugins/content/smilies"> <param name="frame" type="smiliesframe" label="Сопоставление" description="Сопоставление" /> </params>
Теперь он должен выглядеть так:
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="plugin" group="content" method="upgrade">
<name>Content - Smilies</name>
<author>Moskitos80</author>
<creationDate>07-10-2011</creationDate>
<copyright>Copyright (C) 2011 - 2012. All rights reserved.</copyright>
<license>GNU/GPL</license>
<authorEmail>moskitos80@gmail.com</authorEmail>
<authorUrl>/</authorUrl>
<version>1.0</version>
<description>Преобразует заданные символы в контенте в соответствующие смайлики</description>
<files>
<filename plugin="smilies">smilies.php</filename>
<folder>smilies</folder>
</files>
<params addPath="/plugins/content/smilies">
<param name="frame" type="smiliesframe" label="Сопоставление" description="Сопоставление" />
</params>
</install>
В теги params - заключаются . Если мы хотим добавить не стандартный элемент, то мы указываем в охватывающем теге params - атрибут addPath, а его значением станет путь в папку с файлом, где будет описан класс, реализующий нужный функционал. Далее указываем сам элемент param - все атрибуты соответствуют стандартным, но атрибут type - имеет значение - название файла (smiliesframe - без расширения), описывающего элемент класса.
Класс этот должен расширять класс JElement и иметь название JElement(имяФайлаЭлемента). Так, как в xml файле манифеста мы указали в атрибуте type параметра param значение smiliesframe, то файл нам нужно назвать smiliesframe.php , а класс который мы в нем опишем: JElementSmiliesFrame. Он должен иметь единственный метод:
fetchElement($name, $value, &$xmlElement, $control_name)
Где $name, $value - это значения одноимённых атрибутов xml - элемента <param /> в файле манифеста. $xmlElement - это объект JSimpleXMLElement, который содержит в себе дубликаты остальных параметров.
В принципе аргументы этого метода, в нашем случае, нам не интересны. Нам вообще нужно будет просто вернуть из метода нашего класса - html код элемента (это касается и всех остальных случаев) ниже листинг файла smiliesframe.php
<?php
defined('_JEXEC')or die('Restricted access');
class JElementSmiliesFrame extends JElement
{
public function fetchElement($name, $value, &$xmlElement, $control_name)
{
return '<iframe frameborder="0" src="/plugins/content/smilies/smiliestoolbar.php" width="400px" height="400" align="center">IFRAME не работает!</iframe>';
}
}
В листинге выше мы описали наш не стандарный элемент:
<param name="frame" type="smiliesframe" label="Сопоставление" description="Сопоставление" />
Который выведет в панели администратора html элемент IFRAME, который отоюражает результат работы файла /plugins/content/smilies/smiliestoolbar.php - создадим этот файл. Однако теперь нам нужно инициализировать систему, как бы с нуля, ведь фактически получается, что файл smiliestoolbar.php подключается у нас вне движка, а так хочется попользоваться его удобствами. Запустить систему "с толкача" можно следующим образом (пропишем этот код в самом начале файла smiliestoolbar.php) :
define('_JEXEC',1);
header('Content-type: text/html; charset=utf-8');
define('DS',DIRECTORY_SEPARATOR);
define('JPATH_BASE', realpath('..'.DS.'..'.DS.'..'.DS));
require_once(JPATH_BASE.DS.'includes'.DS.'defines.php');
require_once(JPATH_BASE.DS.'includes'.DS.'framework.php');
$mainframe = JFactory::getApplication('administrator');
Теперь опишу алгоритм работы панели админа: скрипт smiliestoolbar.php - получает сериализованный массив из файла collation.txt, десериализует его, и если в нём есть элементы, то он заполняет ими динамическую таблицу, если данных в массиве нет, то выводим таблицу с единственной, пустой строкой. В файле smiliestoolbar.php пропишем следующий код:
$smiles = array(); $smiles = unserialize( file_get_contents(JPATH_BASE.'/plugins/content/smilies/collation.txt') );
Далее нам потребуется Javascript, который предоставит нам функционал по добавлению/удалению строк таблицы:
<script type="text/javascript">
<!--
//добавить строку:
function addrow(index) {
var htmlTable = document.getElementById("smiletable");
htmlTable.insertRow(index + 1);
htmlTable.rows[index + 1].insertCell(0);
htmlTable.rows[index + 1].insertCell(1);
htmlTable.rows[index + 1].insertCell(2);
htmlTable.rows[index + 1].cells[0].innerHTML = '<input size="5" name="smile[ch][]" value="" />';
//Здесь сделано так, из-за косяков с id - при данном раскладе он получается одинаковым и это вызывает
// ошибку в IE.
htmlTable.rows[index + 1].cells[1].innerHTML = "<?php echo addslashes( images('smile[im][]','zzz'))?>";
htmlTable.rows[index + 1].cells[1].innerHTML = htmlTable.rows[index + 1].cells[1].innerHTML.replace(/zzz/gm,'img_' + index);
htmlTable.rows[index + 1].cells[2].innerHTML = '<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" /> ' +
'<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" />';
}
//удалить строку:
function delrow(index) {
var htmlTable = document.getElementById("smiletable"),
rowCount = htmlTable.rows.length;
// Это проверка для того, что бы пользователь не мог удалить
// последнюю строку.
if(rowCount > 2) {
htmlTable.deleteRow(index);
} else {
return false;
}
}
//-->
</script>
В листинге выше мы наблюдаем вставку php кода, использующую функцию images('smile[im][]','zzz') код этой функции выводит выпадающий список файлов картинок из директории /images/ и взят из метода класса JHTMLList::image()

Можно было бы использовать и стандарный функционал:
JHTML::_('list.images', $name, $active, ... );
Но он не позволяет передавать id для тега картинки, он формирует его из параметра $name, а так, как строки у нас формируются динамически, а имя элементов выпадающих списков для картинок - у нас одинаковое smile[im][] ( да кстати, и имена текстовых полей для символов смайлов тоже smile[ch][] ) формирующее в итоге массив $_POST['smile']:
Array (
[ch] => Array
(
[0] => :)
[1] => :(
[2] => :P
[3] => :@
)
[im] => Array
(
[0] => articles.jpg
[1] => clock.jpg
[2] => ext_com.png
[3] => ext_com.png
)
)
то и id в таком случае получается одинаковым, и IE нам этого не прощает. Поэтому я взял код метода класса JHTMLList::image() и чуть - чуть его подправил, так, что бы можно было указывать id для тега картинки и попросту вынес его в отдельную функцию:
// Функция взята из класса JHTMLList::image() и переделана из-за того что в стандартной нельзя
// Задать id картинке
function images( $name, $idtag, $active = NULL, $directory = NULL, $extensions = "bmp|gif|jpg|png" )
{
if ( !$directory ) {
$directory = '/images/';
}
jimport( 'joomla.filesystem.folder' );
$imageFiles = JFolder::files( JPATH_SITE.DS.$directory );
$images = array( JHTML::_('select.option', '', '- '. JText::_( 'Select Image' ) .' -' ) );
foreach ( $imageFiles as $file ) {
if ( preg_match( "#$extensions#i", $file ) ) {
$images[] = JHTML::_('select.option', $file );
}
}
$images = JHTML::_('select.genericlist', $images, $name, 'class="inputbox" size="1" '. $javascript, 'value', 'text', $active, $idtag );
return $images;
}
А вот код, который формирует саму html - таблицу, согласно алгоритму:
<form name="smileconfig" method="post" action="">
<table id="smiletable" width="350px" cellpadding="1" cellspacing="1">
<thead>
<tr>
<th>Символ</th>
<th>Картинка</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php if(count($smiles['ch']) < 1 ):?>
<tr>
<td style="width:76px"><input size="5" name="smile[ch][]" value="" /></td>
<td>
<?php echo JHTML::_('list.images', 'smile[im][]')?>
</td>
<td>
<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" />
<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" />
</td>
</tr>
<?php else : for( $i = 0; $i < count($smiles['ch']); $i++) : ?>
<tr>
<td style="width:76px"><input size="5" name="smile[ch][]" value="<?php echo trim($smiles['ch'][$i])?>" /></td>
<td>
<?php echo images('smile[im][]','img_'.$i, trim($smiles['im'][$i] ))?>
</td>
<td>
<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" />
<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" />
</td>
</tr>
<?php endfor; endif; ?>
</tbody>
</table>
<input type="submit" name="send" value="сохранить" />
</form>
А вот полный листинг файла smiliestoolbar.php (это самый объёмный файл в плагине.)
<?php
header('Content-type: text/html; charset=utf-8');
// Инициализация движка ----------------------------
define('_JEXEC',1);
define('DS',DIRECTORY_SEPARATOR);
define('JPATH_BASE', realpath('..'.DS.'..'.DS.'..'.DS));
require_once(JPATH_BASE.DS.'includes'.DS.'defines.php');
require_once(JPATH_BASE.DS.'includes'.DS.'framework.php');
$mainframe = JFactory::getApplication('administrator');
//---------------------------------------------------
if( isset($_POST['smile']) && is_array($_POST['smile']) )
{
$saved = serialize( $_POST['smile'] );
file_put_contents(JPATH_BASE.'/plugins/content/smilies/collation.txt', $saved );
}
$smiles = array();
$smiles = unserialize(file_get_contents(JPATH_BASE.'/plugins/content/smilies/collation.txt'));
JHTMLList::image();
// Функция взята из класса JHTMLList::image() и переделана из-за того что в стандартной нельзя
// Задать id картинке
function images( $name, $idtag, $active = NULL, $directory = NULL, $extensions = "bmp|gif|jpg|png" )
{
if ( !$directory ) {
$directory = '/images/';
}
jimport( 'joomla.filesystem.folder' );
$imageFiles = JFolder::files( JPATH_SITE.DS.$directory );
$images = array( JHTML::_('select.option', '', '- '. JText::_( 'Select Image' ) .' -' ) );
foreach ( $imageFiles as $file ) {
if ( preg_match( "#$extensions#i", $file ) ) {
$images[] = JHTML::_('select.option', $file );
}
}
$images = JHTML::_('select.genericlist', $images, $name, 'class="inputbox" size="1" '. $javascript, 'value', 'text', $active, $idtag );
return $images;
}
?>
<script type="text/javascript">
<!--
//добавить строку:
function addrow(index) {
var htmlTable = document.getElementById("smiletable");
htmlTable.insertRow(index + 1);
htmlTable.rows[index + 1].insertCell(0);
htmlTable.rows[index + 1].insertCell(1);
htmlTable.rows[index + 1].insertCell(2);
htmlTable.rows[index + 1].cells[0].innerHTML = '<input size="5" name="smile[ch][]" value="" />';
//Здесь сделано так, из-за косяков с id - при данном раскладе он получается одинаковым и это вызывает
// ошибку в IE.
htmlTable.rows[index + 1].cells[1].innerHTML = "<?php echo addslashes( images('smile[im][]','zzz'))?>";
htmlTable.rows[index + 1].cells[1].innerHTML = htmlTable.rows[index + 1].cells[1].innerHTML.replace(/zzz/gm,'img_' + index);
htmlTable.rows[index + 1].cells[2].innerHTML = '<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" /> ' +
'<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" />';
}
//удалить строку:
function delrow(index) {
var htmlTable = document.getElementById("smiletable"),
rowCount = htmlTable.rows.length;
// Это проверка для того, что бы пользователь не мог удалить
// последнюю строку.
if(rowCount > 2) {
htmlTable.deleteRow(index);
} else {
return false;
}
}
//-->
</script>
<style>
<!--
table#smiletable tr td{text-align:center}
//-->
</style>
<form name="smileconfig" method="post" action="">
<table id="smiletable" width="350px" cellpadding="1" cellspacing="1">
<thead>
<tr>
<th>Символ</th>
<th>Картинка</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php if(count($smiles['ch']) < 1 ):?>
<tr>
<td style="width:76px"><input size="5" name="smile[ch][]" value="" /></td>
<td>
<?php echo JHTML::_('list.images', 'smile[im][]')?>
</td>
<td>
<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" />
<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" />
</td>
</tr>
<?php else : for( $i = 0; $i < count($smiles['ch']); $i++) : ?>
<tr>
<td style="width:76px"><input size="5" name="smile[ch][]" value="<?php echo trim($smiles['ch'][$i])?>" /></td>
<td>
<?php echo images('smile[im][]','img_'.$i, trim($smiles['im'][$i] ))?>
</td>
<td>
<input type="button" onclick="addrow(this.parentNode.parentNode.rowIndex)" value="+" />
<input type="button" onclick="delrow(this.parentNode.parentNode.rowIndex)" value="-" />
</td>
</tr>
<?php endfor; endif; ?>
</tbody>
</table>
<input type="submit" name="send" value="сохранить" />
</form>
Тут есть один тонкий момент: Когда мы настраиваем сопоставление символы - картинка, сохранить наши настройки мы сможем только той кнопкой "сохранить" которая выводится снизу нашей таблицы, а не стандарной кнопкой движка Joomla 1.5 - это плата за использование настолько нестандарного подхода к разработке панели админа.
Нам осталось лишь дописать код замены в файле smilies.php Замену будем производить, как во вводном тексте, так и полном тексте статьи, при помощи фунций str_replace - ей мы передадим массивы, полученные из десериализованного массива из файла collation.txt. Полный код основного файла плагина smilies.php
<?php
defined('JPATH_BASE') or die ('Restricted access');
jimport( 'joomla.plugin.plugin' );
class plgContentSmilies extends JPlugin
{
function onPrepareContent( &$article, &$params, $limitstart)
{
$smiles = array();
// Получаем, десериализуем массив из файла:
$smiles = unserialize(file_get_contents(JPATH_BASE.'/plugins/content/smilies/collation.txt'));
// В массиве $smiles['im'] у нас только имена файлов, нужно что бы были
// полноценные html теги картинок:
foreach($smiles['im'] AS &$pic)
{
$pic = '<img class="smilies-pic" src="images/'.$pic.'" />';
}
// Замена во вводном тексте:
$article->introtext = str_replace($smiles['ch'], $smiles['im'], $article->introtext);
// Замена в основном тексте:
$article->text = str_replace($smiles['ch'], $smiles['im'], $article->text);
return true;
}
}
На данный момент мы должны иметь следующие файлы:
smilies.php smilies.xml smilies/smiliesframe.php smilies/smiliestoolbar.php smilies/collation.txt smilies/index.html
Теперь можно залить картинки смайлов в папку images, настроить сопоставление символ - картинка и всё! В итоге мы получили механизм, коорый позволяет нам заменять некий набор символов в статье, на соответствующую картинку, причём и наборы символов и картинки можно добавлять в неограниченном количестве. Если что то не понятно спрашиваем в комментариях. Вот ссылка на готовый
Joomla 1.5: Создание плагина smilies
