Учим наш редактор понимать bb коды
Добро пожаловать на Блог RS дорогой читатель! Сегодня мы продолжим с Вами цикл статей разработка блога с нуля. Как я и обещал в прошлой статье сегодня мы обучим наш редактор постов заменять html код на bb код. Так же мы отредактируем наш обработчик, добавим возможность заменять bb код на html код. Если проанализировать сегодняшний объем работы, то мы поймем, что нам лишь необходимо написать скрипт замены html кода на bb коды, а все остальное у нас уже давно написано, так что 60% работы лежит и ждет кода мы его скопируем 
Редактируем форму редактора
Предлагаю начать с редактирования нашего шаблона с формой. Если помните, в статье Функция вставки bb кодов мы писали javascript функцию отвечающую за добавление bb кода в текстовую форму. Мы тогда дополняли шаблон addcontent.html. Именно в нем сейчас лежат уже написанные строчки кода, которые следует скопировать в другой шаблон - eddcontent.html. Что же нам следует перенести? Отвечу Две формы и панельку с bb кодами... Давайте я вывешу весь код шаблона eddcontent.html с уже добавленными строками:
<table width="600px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="center">
<!--ПАНЕЛЬ ББ КОДОВ-->
<span onclick="tags(0);" style="cursor:pointer;">[b][/b]</span>
<span onclick="tags(1);" style="cursor:pointer;">[a][/a]</span>
<span onclick="tags(3);" style="cursor:pointer;">[img]</span>
<span onclick="tags(5);" style="cursor:pointer;">[end]</span>
<!--ПАНЕЛЬ ББ КОДОВ-->
</td>
</tr>
<tr>
<td width="100px" height="100px" valign="top" align="center">
<form action="?page=edd_content" method="post" name="form">
<input name="edd_id_post" type="hidden" value="[_id]">
<br>
<input style="width:600px;" name="edd_name_post" type="text" value="[_title]">
<br>
<textarea style="width:600px;height:600px;" id="txt_post" name="edd_txt_post" rows="10">[_text]</textarea>
<input style="width:600px;" name="edd_author_post" type="text" value="[_author]">
<br>
<br><br><input type="submit" value="Редактировать пост">
</form>
</td>
</tr>
</table>
<!--ФОРМА [a][/a]-->
<div class="window_tags" id="window_tags_a" style="display:none;">
<div class="input">
<input id='input_link_a' style='width:220px;' type='text' value='Введите ссылку'/>
<input id='input_text_a' style='width:220px;' type='text' value='Введите текст ссылки'/>
<div id='window_supmit' onclick='tags(2);'>
<p id='p_sub'>ОК</p>
</div>
</div>
</div>
<!--ФОРМА [a][/a]-->
<!--ФОРМА [img]-->
<div class="window_tags" id="window_tags_img" style="display:none;">
<div class="input">
<input id='radio_pos' type='hidden' value=''/>
<span id='radio_1' onclick="pos('l');" style='font-weight:100;cursor:pointer;'>left</span>
<span id='radio_2' onclick="pos('c');" style='font-weight:100;cursor:pointer;'>center</span>
<span id='radio_3' onclick="pos('r');" style='font-weight:100;cursor:pointer;'>right</span>
<input id='input_link_img' name='input_link_img' style='width:220px;' type='text' value='Введите ссылку'/>
<div id='window_supmit' onclick='tags(4);'>
<p id='p_sub'>ОК</p>
</div>
</div>
</div>
<!--ФОРМА [img]-->
Я думаю, что тут ничего сложного нет...я просто перенес панельку и две формы в наш шаблон отвечающий за форму в редакторе постов.
Отредактируем обработчик редактора
Давайте с начало покончим с переносами уже готовых скриптов Сейчас наш редактор не понимает bb кодов, а значит если мы отредактируем пост используя bb код, то наш редактор не заменяя их на html сохранит пост в базе данных. Раньше наша форма добавления постов в базу данных тоже не понимала bb коды, мы ее научили в прошлой статье. Открываем модуль addcontent.php находим строки которые мы писали в прошлой статье:
//Замена bb кодов
//---------------------[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]
//---------------------[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]
//---------------------[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 кодов
Копируем этот код в модуль allcontent.php после строк:
//Избавляемся от html кода
$edd_name_post = htmlspecialchars($edd_name_post);
$edd_txt_post = htmlspecialchars($edd_txt_post);
$edd_author_post = htmlspecialchars($edd_author_post);
//Избавляемся от html кода
Заменяем в скипрте переменную $txt_post на переменную $edd_txt_post (ЭТО ВАЖНО). Должно получится слудеющее: (этот кусок кода полностью рабочий, я уже все поменял)
//Замена bb кодов
//---------------------[b][/b]
preg_match_all("/\[b\](.*?)\[\/b\]/",$edd_txt_post,$txt_bb);//Сохранили в переменную $txt_bb найденный текст между [b] и [/b]
//Заменяем по очереди bb код на html
for($i=0;isset($txt_bb[1][$i]);$i++)
$edd_txt_post = preg_replace("/\[b\].*?\[\/b\]/s","<span style=\"font-weight:bold;\">".$txt_bb[1][$i]."</span>",$edd_txt_post,1);
//---------------------[b][/b]
//---------------------[img]
preg_match_all("/\[img url='(.*?)' pos='(.*?)'\]/s",$edd_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
$edd_txt_post = preg_replace("/\[img url='.*?' pos='.*?'\]/s","<img src=\"".$txt_bb[1][$i]."\" border=\"0px\"".$align_img.">",$edd_txt_post,1);
}
//---------------------[img]
//---------------------[a][/a]
//Заменяем по очереди bb код на html
preg_match_all("/\[a url='(.*?)'\](.*?)\[\/a\]/s",$edd_txt_post,$txt_bb);//Сохранили в переменную $txt_bb ссылку и текст ссылки
for($i=0;isset($txt_bb[1][$i]);$i++)
$edd_txt_post = preg_replace("/\[a url='.*?'\].*?\[\/a\]/s","<a href=\"".$txt_bb[1][$i]."\">".$txt_bb[2][$i]."</a>",$edd_txt_post,1);
//---------------------[a][/a]
//Замена bb кодов
Итоги переноса
Ну что ж.. Мы в редакторе прописали панельку с bb кодами, выставили две формы для сто процентной работы этой панельки. Далее мы отредактировали обработчик, добавили возможность заменять bb код на html код прежде чем записать результат в базу данных. Теперь нам предстоит написать скрипт который заменит html на bb коды.
html -> bb код
Смысл скипрта следующий. Текст который находится в базе данных содержит html теги. Мы напишем скрипт который найдет эти html теги и заменить их на bb коды. После чего все это выведет на экран администратора. Скрипт будет находится в функции eddcontent($id) сразу после строки:
$text_post = str_replace("<BR>","",$myrow_index[text]);//заменяем br в тексте на пустотув файле allcontent.php. Вот код с комментариями:
//Замена html на bb коды
//[b][/b]
$text_post = str_replace("<span style=\"font-weight:bold;\">","[b]",$text_post);//Нашли тег <span> и заменили его на [b]
$text_post = str_replace("</span>","[/b]",$text_post);//Нашли тег </span> и заменили его на [/b]
//[b][/b]
//[a url=''][/a]
preg_match_all("/<a href=\"(.*?)\">(.*?)<\/a>/",$text_post,$a_link);//Нашли все теги <a></a> сохранили ссылки и текст ссылок
for($al=0;isset($a_link[1][$al]);$al++)//Поочереди меняем...
$text_post = preg_replace("/<a href=\".*?\">.*?<\/a>/","[a url='".$a_link[1][$al]."']".$a_link[2][$al]."[/a]",$text_post,1);//..тег <a></a> на [a][/a]
//[a url=''][/a]
//[img url='']
preg_match_all("/(<img.*?\">)/s",$text_post,$all_img);//Нашли все теги <img>
for($il=0;isset($all_img[1][$il]);$il++)
{
if(preg_match("/align=\".*?\"/s",$all_img[1][$il]))//Определяем есть ли в теге <img> атрибут align
{//Если есть
preg_match("/align=\"(.*?)\"/s",$all_img[1][$il],$pos_img);//Определяем свойство атрибута
if($pos_img[1] == "left")$txt_position = "l";//Если лево
if($pos_img[1] == "center")$txt_position = "c";//Если центр
if($pos_img[1] == "right")$txt_position = "r";//Если право
}
else $txt_position = "";//Если атрибула align нет в теге <img>
preg_match("/src=\"(.*?)\"/s",$all_img[1][$il],$img_link);//Сохраняем путь к изображению
$text_post = preg_replace("/<img.*?\">/s","[img url='".$img_link[1]."' pos='".$txt_position."']",$text_post,1);//Заменяем <img> на [img]
}
//[img url='']
//Замена html на bb коды
Я описал работу почти каждой строчки, логика должна быть понятна
Ну что ж.. Если есть какие вопросы, задавайте, удачи Вам, у меня все!
 |
Исходник |
У меня работает тока жирное выделение и все. После редактирования контента весь html код даже выделение выводится в пост. В добавлении контента также кроме <b> ни чего не работает выводит html код. движок собирал из ваших исходников. потом по статьям все без результатно
как будет работать файл js.js на странице редактирования поста, если в строчке "document.getElementById('text_post').value += "[a url='"+input_link_a+"']"+input_text_a+"[/a]";" id текстового поля установлен как 'text_post' а должен быть как 'edd_text_post'. Как решить эту проблему?
else document.getElementById('edd_text_post').value += "[a url='"+input_link_a+"']"+input_text_a+"[/a]";