Обработчик bb кодов для нашей CMS

 

Приветствую Вас на своем блоге! Как я и говорил в прошлой статье, сегодня мы будем писать обработчик bb кодов для нашей админки. Каким способом наш скрипт будет заменять bb коды на html? Все довольно просто. Мы с помощью функции preg_replace найдем в тексте bb код и заменим его Процедура нахождения и замена заменяемых строк будет осуществляться буквально 3-4 строчками php кода. Сам скриптик будет написан в модуле добавление постов, который мы писали в статье "Реализуем добавление постов через админ панель". Ну что ж.. Приступим к написанию скрипта?

 

 

Как я и говорил, писать его будем в нашем ранее написанном модуле. Так что открываем файл addcontent.php. Скрипт стоит писать сразу после того как мы заменили весь html на html сущности, то есть после этих строк:

    $name_post = htmlspecialchars($name_post);
$txt_post = htmlspecialchars($txt_post);
$author_post = htmlspecialchars($author_post);

 

Начнем с bb кода "b"

 

На что менять этот bb код? Самое простое это воспользоваться тегом <span> добавив к нему стиль font-weight:bold. Менять будем с помощью функции preg_replace, а не str_replace. Если вы знаете эти функции, то возможно возникнет вопрос, почему именно preg_replace? Я уже размышлял на этот счет в статье bb коды на php. Уж очень мне не нравится то, что если забыть закрыть bb тег то будут небольшие проблемы, поэтому использовать будем preg_replace. Давайте я сформулирую логику:

  • Ну для начала функция preg_match_all найдет все что стоит между [ b ] и [ /b ]
  • Сохранит найденное
  • После, циклом for, мы будем по очереди менять найденные [ b ]текст[ /b ] на <span style="font-weight:bold;">текст</span>

Как видите менять мы будем не по отдельности, то есть не bb код [ b ] на <span style="font-weight:bold;"> а [ /b ] на </span> а все вместе... Таким образом мы избежим ошибок, если вдруг удалим [ b ] или [ /b ] при наборе текста. Приступим к реализации. Вот код замены bb кода "b" на html, естественно с комментариями

        //---------------------[b][/b]
preg_match_all("/\[b\](.*?)\[\/b\]/",$txt_post,$txt_bb);//Сохранили в переменную $txt_bb найденный текст между [b] и [/b]
//Заменяем по очереди bb код на html
for($i=0;isset($txt_bb[1][$i]);$i++)
$txt_post = preg_replace("/\[b\].*?\[\/b\]/s","<span style=\"font-weight:bold;\">".$txt_bb[1][$i]."</span>",$txt_post,1);
//---------------------[b][/b]

Для поиска мы используем регулярное выражение, о них можете почитать тут

 

Обрабатываем bb код [img]

 

Тут чутка посложнее, ибо нам необходимо помимо пути к изображению сохранить еще и позицию, при этом определить какая позиция. Стало быть используем if Вот код с комментариями:

        //---------------------[img]
preg_match_all("/\[img url='(.*?)' pos='(.*?)'\]/s",$txt_post,$txt_bb);//Сохранили в переменную $txt_bb ссылку и позицию изображения
for($i=0;isset($txt_bb[1][$i]);$i++)
{
if($txt_bb[2][$i] != "")//Определяем есть ли позиция у изображения
{
//Если есть позиция, то определяем какая, и создаем свойство для тега <img>
if($txt_bb[2][$i] == "l")$align_img = " align=\"left\"";
if($txt_bb[2][$i] == "r")$align_img = " align=\"right\"";
if($txt_bb[2][$i] == "c")$align_img = " align=\"center\"";
}
else $align_img = "";//Если позиции нет, то не создаем свойство для тега
//Заменяем по очереди bb код на html
$txt_post = preg_replace("/\[img url='.*?' pos='.*?'\]/s","<img src=\"".$txt_bb[1][$i]."\" border=\"0px\"".$align_img.">",$txt_post,1);
}
//---------------------[img]

 

Обрабатываем bb код [a]

 

Тут тоже самое что при bb коде "b" Просто находим, сохраняем и заменяем. Вот код с комментариями:

        //---------------------[a][/a]
//Заменяем по очереди bb код на html
preg_match_all("/\[a url='(.*?)'\](.*?)\[\/a\]/s",$txt_post,$txt_bb);//Сохранили в переменную $txt_bb ссылку и текст ссылки
for($i=0;isset($txt_bb[1][$i]);$i++)
$txt_post = preg_replace("/\[a url='.*?'\].*?\[\/a\]/s","<a href=\"".$txt_bb[1][$i]."\">".$txt_bb[2][$i]."</a>",$txt_post,1);
//---------------------[a][/a]

 

Заключение

 

Теперь при добавление постов через админку, можно пользоваться bb кодами для придание тексту более специфичный вид. В следующей статье мы научим нашу админку переводить html код обратно в bb код, для того что бы можно было редактировать посты в точно таком же режиме, как и при добавление постов. Так же обучим редактор работать с bb кодами. Вообщем то на сегодня все, если есть какие то вопросы задавайте, отвечу, спасибо за внимание, у меня все!

Исходник
 

Возможно Вам будут интересны следующие заметки

Комментарии (40)

Ваше имя *
Сайт
Ваш E-mail *
Ваше сообщение *
 
Вы не подтвердили условия политики конфиденциальности.
Гость biolog, 08 Ноября 2011 г. 15:50 пишет:
Гость
Сложно все для меня с этими кодами...
Rio-Shaman, 08 Ноября 2011 г. 16:35 пишет:
Автор
Уважаемый biolog
Например, в чем Вы не разобрались?
Гость biolog, 09 Ноября 2011 г. 08:20 пишет:
Гость
НУ я в целом мало чего понимаю в этих кодах и куда что вставить, чтобы не сломать - вот так скажем. А потому обычно не лезу в коды вообще. Да, кстати, а что дают все эти изменения, если все-таки сделать? Вроде и без того нормально живу...
Rio-Shaman, 09 Ноября 2011 г. 15:52 пишет:
Автор
Это не изменения =) а одна из статей по написанию админской панели с нуля. Я публикую уроки написания блога, то есть пишем свою cms =)
Ольга, 01 Апреля 2012 г. 12:23 пишет:
Читатель
Здравствуйте, при нажатии на Добавить материал у меня выходит форма с панелькой
[a][/a] [img] [end]. Только я не знаю, как на самом деле должна выглядеть эта панелька, может быть то, что у меня получилось и не верно вовсе. Хотелось бы в начале каждой статьи публиковать скрин с тем, что мы должны видеть и иметь в итоге. Визуально это бы помогло.
Теперь конкретно: ввожу текст нажимаю [b], в тексте появляются , пишу текст между , сохраняю пост, вижу этот текст в БД вместе с . Это правильно? Разбираю пока самый простой случай, т.к. с img вообще не получается добавить. Опишите, пожалуйста, последовательность действий при добавлении текста в новый пост с использовании bb-кодов.
Ольга, 01 Апреля 2012 г. 12:27 пишет:
Читатель
А вот сейчас в БД увидела вместо Попробую еще раз вот это <span style="font-weight:bold;">Попробую еще раз</span>. Похоже так и должно быть. Теперь попробую разобраться со ссылками.
Ольга, 01 Апреля 2012 г. 13:58 пишет:
Читатель
с картинками тоже не получается пока.
Последовательность действий: вхожу в редактирование, рядом с каким-нибудь текстом прописываю путь к изображению, нажимаю, например, left, ОК, редактировать. В БД ничего не меняется. Может не верно прописываю путь - img\u33.jpg ?
Неплохо было бы изобрести диалог Open )).
Rio-Shaman, 01 Апреля 2012 г. 21:09 пишет:
Автор
У Вас обратный слэш ( \ ) в адресе изображения, а должен быть обычный слэш ( / ). Ссылка должна быть вот такого вида:
img/u33.jpg
Я скрипт тестил, все нормально должно быть
Ответ для пользователя: Ольга
Ольга, 02 Апреля 2012 г. 09:56 пишет:
Читатель
и обычный слеш пробовала, как только не пробовала. Вообще, как путь должен быть прописан ? У меня изображение в: localhost/000blog/admin/img/u33.jpeg.
Rio-Shaman, 02 Апреля 2012 г. 13:53 пишет:
Автор
По сути правильная ссылка будет вот такой:
admin/img/u33.jpeg.
Но, если Вы говорите что в БД ничего не меняется, то есть в БД у вас так и прописано:
[img url='admin/img/u33.jpeg' pos='l']
То дело в скрипте. Если же в БД прописано вот так:
<img src="admin/img/u33.jpeg" border="0px" align="left">
То дело скорее всего в пути изображения.
Ответ для пользователя: Ольга
Ольга, 02 Апреля 2012 г. 17:34 пишет:
Читатель
говоря, что в Бд ничего не изменилось я имеле ввиду, что ссылка там вообще не появилась. Например, в посте пишу какой-то текст, сохраняю его, далее хочу отредактировать пост, довавив картинку. Вхожу в админку, добавляю к тексту картинку, ну т.е. прописываю путь к ней, сохраняю, но в БД вижу только всё тот же текст без какого-либо ....U33..... Но дома попробую прописать рекомендованный Вами путь. Спасибо.
Rio-Shaman, 02 Апреля 2012 г. 18:05 пишет:
Автор
В этом посте внесены нужные изменения лишь в модуль добавление постов. Для того что бы редактор понимал bb коды вам необходимо перейти к следующему уроку.
Ответ для пользователя: Ольга
Ольга, 03 Апреля 2012 г. 09:21 пишет:
Читатель
прописала путь, как Вы сказали admin/img/u33.jpeg, и БД появился хотя бы url... О том, что нужно именно так прописать путь, я сама должна была догадаться. Теперь буду разбираться правильно ли он записался в БД.
Ольга, 06 Апреля 2012 г. 16:27 пишет:
Читатель
добрый день, в БД картинка сохранилась таким образом:
[img url=&#039admin/img/u33.jpeg&#039 pos=&#039l&#039].
Это не правильно ?
Rio-Shaman, 06 Апреля 2012 г. 17:04 пишет:
Автор
Нет не правильно. У меня пара вопросов есть:
1. Вы переходили к следующему посту?
2. Если не переходили, то добавляете в БД бб код через форму "добавить пост" или "редактировать пост"?
Ответ для пользователя: Ольга
Ольга, 08 Апреля 2012 г. 16:31 пишет:
Читатель
1. Следующий пост "Учим наш редактор понимать ВВ коды" ?
2. через редактировать пост
Rio-Shaman, 08 Апреля 2012 г. 16:36 пишет:
Автор
1. Да
2. Если вы не вносили поправки в редактор (Эти поправки описаны в посте "Учим наш редактор понимать ВВ коды" ) то ББ коды в редакторе работать не будут.
Ответ для пользователя: Ольга
Ольга, 08 Апреля 2012 г. 17:50 пишет:
Читатель
я внесла все поправки, как мне кажется, из поста Учим наш редактор понимать ВВ коды.

Несмотря на то, что у меня не получилось с картинками, сейчас пытаюсь разобраться с категориями, пост
Доделываем редактор постов для нашей CMS. Что-то тоже не выходит ничего. Правда я не все шаги делала в пользовательской части.
Например, для категорий мы добавляли в БД новую колонку или нет? Если ее нужно добавить, какие у нее характеристики?

А пока у меня пишет ошибку
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in Z:\home\localhost\www\000blog\admin\moduls\addcontent.php on line 79

Это строка функции function addcontent():

menu = mysql_fetch_array($allmenu);
Rio-Shaman, 08 Апреля 2012 г. 18:05 пишет:
Автор
Пропускать какие либо элементы из постов чреваты негативными последствиями, так как можно пропустить создание колонки в БД, или очень нужного исправления. Возможно Вы пропустили вот этот пост: "Связываем меню и вывод мини новостей" Смотрите внимательней, код рабочий! Я создавал копию движка именно по материалам блога.

Если у Вас ничего не получится, пришлите копию вашего проекта (лучше через форму контакты), я посмотрю, правда не сегодня, сейчас времени нет.
Ответ для пользователя: Ольга
Ольга, 08 Апреля 2012 г. 18:12 пишет:
Читатель
Спасибо за помощь, как раз хочу все пройти с самого начала ничего не пропуская. Может быть со второго раза все получиться.
Игорь, 14 Июня 2012 г. 09:45 пишет:
Читатель
Прошел все статьи по добавалению бб кодов, все сделал пошагово, но потом решил проверить как они работают) И вот у меня в статье выдается не жирный шрифт, не ссылка, а голимый хтмл текст, подскажите пожалуйста, где искать ошибку.
Rio-Shaman, 14 Июня 2012 г. 11:30 пишет:
Автор
Обработчики идут до вот этого кода:

$name_post = htmlspecialchars($name_post);
$txt_post = htmlspecialchars($txt_post);
$author_post = htmlspecialchars($author_post);

или после?
Ответ для пользователя: Игорь
Игорь, 14 Июня 2012 г. 19:34 пишет:
Читатель
Спасибо, ошибку нашел, чо то я сразу не догадался сравнить свой код с исходником, так бы не пришлось задавать вопрос)
Ответ для пользователя: Rio-Shaman
Rio-Shaman, 14 Июня 2012 г. 20:19 пишет:
Автор
Исходники есть в каждом посте цикла "Создать блог с нуля".
Ответ для пользователя: Игорь
BIgBang, 21 Августа 2012 г. 03:19 пишет:
Читатель
Скока не мучался так и не получилось у меня ничего кроме [b][/b] Ссылки и картинки заносятся в базу вот так [a url=ссылка]текст[/a] и [img url=ссылка pos='c']. уже ваши исходники копировал все без резудьтатно.
Rio-Shaman, 21 Августа 2012 г. 03:49 пишет:
Автор
Ссылка без кавычек?
Ответ для пользователя: BIgBang
BIgBang, 21 Августа 2012 г. 05:13 пишет:
Читатель
[a url=&#039qwertyu&#039]http://www.3dnews.ru/news/633904/[/a] была так сначала потом я пытался убрать блок "//Избавляемся от кавычки" не помогло все равно не переводит в ХТМЛ затем убрал кавычки самостоятельно тут
preg_match_all("/\[a url='(.*?)'\](.*?)\[\/a\]/s",$txt_post,$txt_bb);//Сохранили в переменную $txt_bb ссылку и текст ссылки
for($i=0;isset($txt_bb[1][$i]);$i++)
$txt_post = preg_replace("/\[a url='.*?'\].*?\[\/a\]/s","<a href=\"".$txt_bb[1][$i]."\">".$txt_bb[2][$i]."</a>",$txt_post,1);
так же безполезно. Скопировал полностью код из исходника... ни че не изменилось
BIgBang, 21 Августа 2012 г. 05:17 пишет:
Читатель
проблема в том что я собрал весь сайт по вашим статьям все работает кроме BB кодов, а именно [img] и [a], [b] - работает нормально
Rio-Shaman, 21 Августа 2012 г. 06:06 пишет:
Автор
Скорее всего у Вас php.ini имеет следующую настройку:
magic_quotes_gpc = On
Что означает: Все кавычки экранизируются еще будучи в переменной $_POST. Обработчик видит не вот такой бб код:
[a url='ссылка']http://ссылка.ru[/a]
а вот такой:
[a url=\'ссылка\']http://ссылка.ru[/a]
Само собой регулярное выражение не срабатывает. Самый действенный выход это отключить данную настройку, то есть в php.ini изменить
magic_quotes_gpc = On
на
magic_quotes_gpc = Off
Если моя теория верна, а она скорее всего верна, ведь других объяснений я найти не могу, то все должно заработать

P.S. Если не хотите отключать данную директиву, или нет возможности ее отключить, то можете попробовать переделать регулярное выражение. Но лучше отключите (на всех адекватных, ИМХО, хостингах она отключена)
Ответ для пользователя: BIgBang
BIgBang, 21 Августа 2012 г. 08:24 пишет:
Читатель
Уф спасибо большое помагло. Я реально почти 2 месяца мучался что тока не пробовал. уже и сторонние мудули внедрял ни че не помогало.
Rio-Shaman, 21 Августа 2012 г. 15:59 пишет:
Автор
Рад был помочь =)
Ответ для пользователя: BIgBang
BIgBang, 22 Августа 2012 г. 02:29 пишет:
Читатель
Это опять я. Выявил еще один дефект. Оказалось что у меня редактор постов не переводит ХТМЛ код в ВВ. Так же как и с добавлением поста все идентично но без результатно :(
Rio-Shaman, 22 Августа 2012 г. 16:27 пишет:
Автор
А Вы читали вот этот пост?

http://rio-shaman.ru/index.php?blog=50

Если читали, то мне нужно больше информации... Например как именно выглядят теги (html теги) созданные редактором?
Ответ для пользователя: BIgBang
BIgBang, 22 Августа 2012 г. 19:08 пишет:
Читатель
Конечно читал.
Он заменяет html символы "<" и ">" на код
так выгледит код ссылки &lt;a href=&quot;ссылка&quot;&gt;ссылка&lt;/a&gt;
Rio-Shaman, 22 Августа 2012 г. 19:40 пишет:
Автор
Как я понял в форму для редактирования попадают не бб коды, а чистый html код?
Ответ для пользователя: BIgBang
BIgBang, 23 Августа 2012 г. 04:42 пишет:
Читатель
Да, совершенно верно
Rio-Shaman, 23 Августа 2012 г. 11:50 пишет:
Автор
Стало быть в обработчике добавление постов присутствует ошибка, которая переделывает html код в аналог, после чего записывает в базу данных. Тут одно из двух:
1. Либо в обработчике добавление постов, сразу после преобразования бб кодов в html код, используется функция htmlspecialchars
2. Либо существует какая то настройка в php.ini, о которой я не знаю, которая переделывает html код в аналог без ведома разработчика.
Первым делом посоветовал бы посмотреть что именно попало в базу данных, а именно открыть mysql phpmyadmin и глянуть в каком виде там ссылки лежат. Если не чистый html, а аналог, то проблема именно в коде добавление поста. Если же нет, то даже не знаю в чем проблема, ибо в коде редактирования постов все чисто и должно работать как надо...
Ответ для пользователя: BIgBang
Юрий, 10 Сентября 2012 г. 12:02 пишет:
Читатель
Снова я ) не работает( в форму все вставилось, но когда нажимаю на ббкоды - ничего не происходит. Ни с одним тегом...сделал уже и следующий урок, думал там обрабатывается все, но тоже самое...
Rio-Shaman, 12 Сентября 2012 г. 09:29 пишет:
Автор
Вы читали мой первый комментарий вот в этой теме?
http://rio-shaman.ru/index.php?blog=47
Ответ для пользователя: Юрий
Павел, 09 Сентября 2014 г. 21:52 пишет:
Гость
Алексей, добрый вечер. Такая проблема. На главной странице у меня, допустим, расположены анонсы нескольких статей. Когда я хочу добавить анонс новой статьи, но уже с фотографией, то если выбрана позиция center , фотография располагается в рамках нового анонса. Если же выбираю позицию left или right , то изображение на главной странице располагается поверх анонсов статей. В зависимости от размеров фотографии, располагается поверх 3-4 анонсов. При нажатии на "Читать дальше" фотография располагается поверх рамки для текста, но в основном растягивает рамку, где приводятся Автор, дата. Подскажите, в чем может быть дело. Остальные bb коды работают нормально.