Функция вставки bb кодов

 

Приветствую Вас дорогой читатель! Добро пожаловать на продолжения цикла статей посвященной разработки CMS блога с нуля. Как я и обещал в предыдущей статье, сегодня мы займемся реализацией bb кодов. Для чего они собственно нужны? Как Вы могли заметить, редактором контента в нашей админ панели выступает обычная форма, при этом в этой форме запрещены html теги. Посему, для внесения каких то визуальных эффектов в наши посты, нам просто необходимы bb коды. BB код представляют собой аналог html тега. Такой код совершенно не понятен браузеру, но он понятен нашему скрипту, который опираясь на них, преобразует информацию в понятный для браузера вид. Я разобью эту статью на две части, в этой мы с Вами напишем javascript функцию, которая будет вставлять наши bb коды в текстовое поле, а в следующей статье мы напишем обработчик.

 

 

С чего начать?

 

Давайте подумаем какие bb будем реализовывать.

  • bb код "b" - а именно жирный текст
  • bb код "a" - Вставка ссылок в нашу форму
  • bb код "img" - Вставка изображений в форму
  • bb код "end" - Разделительное код-слово позволяющие отделить мини текст от полного ( кнопка "читать дальше" )

Теперь давайте подумаем о самом процессе добавления bb код в форму

  • bb код "b" - Тут ничего сложного не будет, при нажатие на кнопку появится два bb кода
  • bb код "end" - Аналогично bb коду "b"
  • bb код "a" - С этим bb кодом будет уже по сложнее. Первым делом нам необходимо вывести на экран форму, где мы могли бы заполнить два поля: ссылка и текст ссылки. Далее, после нажатия на кнопку "ОК", введенные нами данные передадутся в текстовое поле.
  • bb код "img" - Аналогично с кодом "a". Необходимо открыть форму, в которой мы могли бы ввести ссылку на изображение, и выбрать позицию, то есть по какому краю выравнивать текст по отношению к изображению, по правому, левому или по центру. Выбор позиции будет реализовываться отдельной функцией.

И того, цель сегодняшней статьи, написать панельку с bb кодами, две формы, и две функции на javascript. Хотел бы кое что сказать о функции добавления кодов. Она будет выполнять две операции, открытие форм для заполнения, и собственно само добавление кодов в текстовое поле.

 

Панелька с bb кодами

 

Открываем наш шаблон addcontent.html и внедряем в нее панельку с bb кодами

<table width="600px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="center">
<!--ПАНЕЛЬ ББ КОДОВ-->
<span style="cursor:pointer;">[b][/b]</span>
&nbsp;
<span style="cursor:pointer;">[a][/a]</span>
&nbsp;
<span style="cursor:pointer;">[img]</span>
&nbsp;
<span style="cursor:pointer;">[end]</span>
<!--ПАНЕЛЬ ББ КОДОВ-->
</td>
</tr>
<tr>
<td valign="top" align="center">
<form action="index.php?page=add_content" method="post" name="form">
<br>
<input style="width:600px;" name="name_post" type="text" value="Название статьи">
<br>
<textarea style="width:600px;height:600px;" name="txt_post" id="txt_post" rows="10">Введите текст*</textarea>
<input style="width:600px;" name="author_post" type="text" value="Автор*">
<br>
<br><br><input type="submit" value="Добавить пост">
</form>
</td>
</tr>
</table>

 

Форма кода "a"

 

Прежде чем я вывешу код формы, хотел бы решить вопрос с дизайном этих форм. Откройте с начало файл style.css в папке admin и вставьте туда следующие стили:

.window_tags
{
border:1px solid #000;
width:250px;
height:100px;
background-color:#fff;
position:absolute;
left:50%;
top:35%;
margin-left:-125px;
}
.input
{
text-align:center;
position:absolute;
margin-top:10px;
}
#window_supmit
{
width:55px;
height:25px;
border:1px solid #000;
text-align:center;
position:absolute;
margin-left:95px;
margin-top:15px;
cursor:pointer;
}
#p_sub
{
margin:0px;
margin-top:3px;
}

Я не хочу грузить вас дизайнерским вопросом нашего проекта, поэтому просто скопируйте и сохраните не глядя

Вот теперь сама форма:

<!--ФОРМА [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'>
<p id='p_sub'>ОК</p>
</div>
</div>
</div>
<!--ФОРМА [a][/a]-->

Вставить этот кусок кода следует в наш шаблон addcontent.html в самый низ

 

Форма кода "img"

 

Этот кусок кода вставляется все в тот же шаблон, в самый низ:

<!--ФОРМА [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' style='font-weight:100;cursor:pointer;'>left</span>&nbsp;
<span id='radio_2' style='font-weight:100;cursor:pointer;'>center</span>&nbsp;
<span id='radio_3' 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'>
<p id='p_sub'>ОК</p>
</div>
</div>
</div>
<!--ФОРМА [img]-->

Ну что ж, с формами вроде разобрались. Приступим к самой функции

 

О функции вставки тегов подробнее

 

Как я уже говорил, она будет выполнять две операции, разграничим визуально поле:

function tags(step)
{
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ

//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ

//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
}

Функция имеет переменную step, она будет отслеживать какую операцию выполнять. Например если переменная step будет равна единице, то функция откроет форму тега "a", если переменная равна нулю, то вставит код "b" в текстовое поле, и т.д.

 

Открытие форм

 

Форм у нас две, значит операции по открытию будет тоже две, напишем их:

function tags(step)
{
var window_tags_a = document.getElementById("window_tags_a");
var window_tags_img = document.getElementById("window_tags_img");
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ
if(step == 1) window_tags_a.style.display = "block";//открытие формы для тега [a][/a]
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега [img]
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ

//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
}

Не удивляйтесь что переменная step имеет не порядковые цифры, функция у меня уже написана, я ее по частям копирую Теперь давайте сохраним ее и подключим. Сохранил я ее под название js.js в папке templates. Для подключения откройте файл index.html и после:

<link rel="stylesheet" type="text/css" href="/templates/style.css">

вставьте:

<script type="text/javascript" src="templates/js.js"></script>

вот эту строку. Теперь откроем шаблон addcontent.html и пропишем вызов функции:

        <!--ПАНЕЛЬ ББ КОДОВ-->
<span style="cursor:pointer;">[b][/b]</span>
&nbsp;
<span onclick="tags(1);" style="cursor:pointer;">[a][/a]</span>
&nbsp;
<span onclick="tags(3);" style="cursor:pointer;">[img]</span>
&nbsp;
<span style="cursor:pointer;">[end]</span>
<!--ПАНЕЛЬ ББ КОДОВ-->

Сохраним, и посмотрим открываются ли у нас формы? У меня ( я переношу, уже написанную функцию, по частям в админ панель ) все прекрасно работает.

 

Обработчик форм, добавляем код "b" и [end]

 

Начнем с простых обработчиков, ведь при добавление этих кодов ненужно обрабатывать форму, вставляем:

function tags(step)
{
var window_tags_a = document.getElementById("window_tags_a");
var window_tags_img = document.getElementById("window_tags_img");
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ
if(step == 1) window_tags_a.style.display = "block";//открытие формы для тега [a][/a]
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега [img]
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
if(step == 0) document.getElementById("txt_post").value += "[b][/b]";//BB код [b][/b]
//------------------
if(step == 5) document.getElementById("txt_post").value += "[end]";//BB код [end] - кнопка "читать дальше"
//------------------
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
}

Логика вставки такова: сохранить то что уже введено в текстовое поле, и прибавить к этому тексту bb код, после чего полученный текст вставить обратно в текстовое поле. Теперь отредактируем нашу панель, добавив в нее вызов функции:

        <!--ПАНЕЛЬ ББ КОДОВ-->
<span onclick="tags(0);" style="cursor:pointer;">[b][/b]</span>
&nbsp;
<span onclick="tags(1);" style="cursor:pointer;">[a][/a]</span>
&nbsp;
<span onclick="tags(3);" style="cursor:pointer;">[img]</span>
&nbsp;
<span onclick="tags(5);" style="cursor:pointer;">[end]</span>
<!--ПАНЕЛЬ ББ КОДОВ-->

Теперь панель полностью готова можно сохранить и посмотреть работает ли она.

 

Обработчик форм, добавляем код "a"

 

Логика впринципе проста:

  • для начала мы сохраним то что ввели в форму
  • после чего с генерируем bb код
  • вставим полученный код в текстовое поле
  • сбросим то что вводили в форму кода "a"

Вот как это выглядит:

function tags(step)
{
var window_tags_a = document.getElementById("window_tags_a");
var window_tags_img = document.getElementById("window_tags_img");
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ
if(step == 1) window_tags_a.style.display = "block";//открытие формы для тега [a][/a]
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега [img]
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
if(step == 0) document.getElementById("txt_post").value += "[b][/b]";//BB код [b][/b]
//------------------
if(step == 5) document.getElementById("txt_post").value += "[end]";//BB код [end] - кнопка "читать дальше"
//------------------
if(step == 2)//Вставляем бб код в форму ([a][/a])
{
window_tags_a.style.display = "none";//Закрываю всплывающее окно
var input_link_a = document.getElementById("input_link_a").value;//Сохраняю введенную ссылку
var input_text_a = document.getElementById("input_text_a").value;//Сохраняю введенный текст
document.getElementById("txt_post").value += "[a url='"+input_link_a+"']"+input_text_a+"[/a]";//Вставляю в форму bb тег ссылки

//сброс
document.getElementById("input_link_a").value = "Введите ссылку";
document.getElementById("input_text_a").value = "Введите текст ссылки";
//сброс
}
//------------------
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
}

Все строки имеют комментарии, так что думаю разберетесь Отредактируем нашу форму, введе в нее вызов функции:

<!--ФОРМА [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]-->

Надеюсь Вы справились с этим пунктом

 

Функция выбора позиции изображения

 

Начнем пожалуй реализацию bb кода img именно с написания функции выбора позиции.

Обратите внимания, форма img имеет скрытое поле radio_pos. В нее будет сохраняться значение "l" - лево, "c" - центр, "r" - право. У каждой кнопки есть стиль font-weight:100 При нажатие на одну из трех кнопок, стиль кнопки будет меняться на font-weight:bold. Функция не сложная и однообразная. Она будет иметь переменную pos которая определит какую из кнопок подсветить, и какое значение вписать в поле radio_pos. Вот функция:

function pos(pos)
{
//-----------------УПРАВЛЕНИЕ РАСПОЛОЖЕНИЕ ИЗОБРАЖЕНИЯ (ЛЕВО/ПРАВО/ЦЕНТР)
if(pos == "l")//если лево
{
for(var i=1;i<=3;i++)
{
if(i==1)document.getElementById("radio_"+i).style.fontWeight = "bold";
else document.getElementById("radio_"+i).style.fontWeight = "100";
}
document.getElementById("radio_pos").value = "l";
}
//------------------
if(pos == "c")//если центр
{
for(var i=1;i<=3;i++)
{
if(i==2)document.getElementById("radio_"+i).style.fontWeight = "bold";
else document.getElementById("radio_"+i).style.fontWeight = "100";
}
document.getElementById("radio_pos").value = "c";
}
//------------------
if(pos == "r")//если право
{
for(var i=1;i<=3;i++)
{
if(i==3)document.getElementById("radio_"+i).style.fontWeight = "bold";
else document.getElementById("radio_"+i).style.fontWeight = "100";
}
document.getElementById("radio_pos").value = "r";
}
//-----------------УПРАВЛЕНИЕ РАСПОЛОЖЕНИЕ ИЗОБРАЖЕНИЯ (ЛЕВО/ПРАВО/ЦЕНТР)
}

Обратите внимание, что цикл for используется для сброса стиля у кнопок. Если этого не делать, то щелкая на обе кнопки, подсветятся обе, а не одна. Сохраним эту функцию в файл js.js. Теперь отредактируем форму img, привяжем вызов функции к кнопкам:

<!--ФОРМА [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>&nbsp;
<span id='radio_2' onclick="pos('c');" style='font-weight:100;cursor:pointer;'>center</span>&nbsp;
<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'>
<p id='p_sub'>ОК</p>
</div>
</div>
</div>
<!--ФОРМА [img]-->

 

Обработчик bb кода img

 

Нам осталось написать обработчик, и наши bb коды готовы. Логика такая же как и у bb кода "a" вот уже полный код функции:

function tags(step)
{
var window_tags_a = document.getElementById("window_tags_a");
var window_tags_img = document.getElementById("window_tags_img");
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ
if(step == 1) window_tags_a.style.display = "block";//открытие формы для тега [a][/a]
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега [img]
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ

//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
if(step == 0) document.getElementById("txt_post").value += "[b][/b]";//BB код [b][/b]
//------------------
if(step == 5) document.getElementById("txt_post").value += "[end]";//BB код [end] - кнопка "читать дальше"
//------------------
if(step == 2)//Вставляем бб код в форму ([a][/a])
{
window_tags_a.style.display = "none";//Закрываю всплывающее окно
var input_link_a = document.getElementById("input_link_a").value;//Сохраняю введенную ссылку
var input_text_a = document.getElementById("input_text_a").value;//Сохраняю введенный текст
document.getElementById("txt_post").value += "[a url='"+input_link_a+"']"+input_text_a+"[/a]";//Вставляю в форму bb тег ссылки

//сброс
document.getElementById("input_link_a").value = "Введите ссылку";
document.getElementById("input_text_a").value = "Введите текст ссылки";
//сброс
}
//------------------
if(step == 4)//Вставляем бб код в форму ([img])
{
window_tags_img.style.display = "none";//Закрываю всплывающее окно
var input_link_img = document.getElementById("input_link_img").value;//Сохраняю введенную ссылку
var radio_pos = document.getElementById("radio_pos").value;//Сохраняю позицию
document.getElementById("txt_post").value += "[img url='"+input_link_img+"' pos='"+radio_pos+"']";//Вставляю в форму bb тег изображения

//сброс
for(var i=1;i<=3;i++)document.getElementById("radio_"+i).style.fontWeight = "100";
document.getElementById("radio_pos").value = "";
document.getElementById("input_link_img").value = "Введите ссылку";
//сброс
}
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
}

И под конец осталось привязать к кнопке в форме img написанную нами часть функции:

<!--ФОРМА [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>&nbsp;
<span id='radio_2' onclick="pos('c');" style='font-weight:100;cursor:pointer;'>center</span>&nbsp;
<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]-->

Ну что ж, я заканчиваю эту статью, если есть какие вопросы, задавайте. Удачи Вам, скоро увидимся, у меня все!

Исходник
 

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

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

Ваше имя *
Сайт
Ваш E-mail *
Ваше сообщение *
 
Rio-Shaman, 30 Марта 2012 г. 13:59 пишет:
Автор
Нашел небольшой недочет в посте. Я его исправил, но те кто уже приступал к этому посту и у них не получилось, добавьте в тег <textarea></textarea> атрибут id. Без него скрипт работать не будет. Вот как должна выглядеть строчка:

<textarea style="width:600px;height:600px;" name="txt_post" id="txt_post" rows="10">Введите текст*</textarea>
Алексей, 23 Апреля 2012 г. 20:28 пишет:
Читатель
Все прекрасно работает)
KISS ME, 29 Ноября 2012 г. 13:21 пишет:
Гость
Это точно
Ответ для пользователя: Алексей
АНдрей, 21 Марта 2013 г. 00:30 пишет:
Гость
Вот натыкался еще на этом сайте http://phpguru.com.ua/posts.php?id=20 много написано на тему ББ кодов с парсером и всем, даже с демо работой и работает.
Владимир, 08 Февраля 2014 г. 20:48 пишет:
Гость
Окна javascript после нажатия ОК не закрываются! Что может быть нет так?
Алексей, 08 Февраля 2014 г. 22:47 пишет:
Автор
Ну если честно, то я затрудняюсь ответить на этот вопрос. Для начала, каким браузером Вы пользуетесь?
Ответ для пользователя: Владимир
Владимир, 08 Февраля 2014 г. 23:27 пишет:
Гость
Opera 19.
javascript работает точно, так как до этого с ним работал
Ответ для пользователя: Алексей
Rio-Wordpress, 20 Декабря 2014 г. 02:56 пишет:
Гость
Короче, нужен редактор для bbcode Остановился на markitup
http://markitup.jaysalvat.com/home/
Скачал. Распаковал. Пример с тэгами заработал на ура. Но мне нужен bbcode.
Скачал плагин для BBcode. сразу же обратил внимание на то, что есть двойное название. В примерах почему-то редактор называется smarkup
хотя в документации везде упоминается markitup.
И так, в этом плагиене в ридми написани, что нужно распаковать в папку настроек скрипта и прописать путь к bbcode/set.js и некоторым файлам стилей.
Обратил внимание на то, что папка bbcode уже существовала и в ней был какой-то conf.js. Я распаковал и все подключал как написано, но ничего не заработало.
В чем ошибка?
И что за файл такой bbcode/conf.js Зачем он нужен, если по документации вообще не нужно делать на него ссылку?
Алексей, 21 Декабря 2014 г. 13:12 пишет:
Автор
Я делал вот по этому примеру
Ответ для пользователя: Rio-Wordpress
Rio-Wordpress, 21 Декабря 2014 г. 14:08 пишет:
Гость
Я делаю всё вроде правильно, нажимаю пред просмотр всё отоброжает верно, жирный и курсивный.
Но в самих комментах выводит только сами bb-коды.
Я только не пойму почему? Получается, что сам сайт не понимает коды!?
Ответ для пользователя: Алексей
Алексей, 21 Декабря 2014 г. 20:08 пишет:
Автор
Если текст, перед выводом на экране, не прогонять через специальные алгоритмы по замене бб кодов на html, то да, отображаться они не будут.
У меня на блоге есть простейший алгоритм. Более корректный парсер бб кодов можно найти в инете (в виде библиотеки)
Ответ для пользователя: Rio-Wordpress
Алексей, 21 Декабря 2014 г. 20:14 пишет:
Автор
Только в моем примере, подход совершенно не верный. Правильнее хранить в БД текст в виде бб кодов, а уже при выводе на экран менять их на html.
Я же делал перевод в html во время добавление записи в БД. А для редактирование переводил обратно, что явно совершенно лишнее телодвижение.
Ответ для пользователя: Rio-Wordpress
Максим, 22 Декабря 2014 г. 01:27 пишет:
Гость
Привет, огромное СПАСИБО за труды, отличный блог!)

Я тоже использую markitup шаблон default.
Суть в следующем... если при написании статьи надо показать допустим HTML код, то если теги <> заменить на сущности и сохранить, тогда при выводе код отображается. Но если его еще раз открыть в редакторе то он будет в виде тегов и при новом сохранении исполнится при выводе статьи...

Алексей, подскажите пожалуйста решение, как реализовано у Вас на сайте?
Алексей, 22 Декабря 2014 г. 10:04 пишет:
Автор
Я храню данные без преобразования бб кодов в html. Преобразование происходит при выводе данных на сайте. Парсить текст можно, например, с помощью xBB
Ответ для пользователя: Максим
dlegame, 30 Декабря 2014 г. 07:14 пишет:
Читатель
Rio-Shaman, можно узнать? почему вы не пишите новые записи в блог? очень жду ваших новых постов...а захожу всегда старое...
Ответ для пользователя: Алексей
Евгений, 02 Августа 2015 г. 17:50 пишет:
Гость
Послушай автор статьи, будь добр реализуй тег [spoiler=название спойлера]текст спойлера[/spoiler].
Алексей, 09 Января 2017 г. 20:05 пишет:
Гость
Друзья, у меня с данным уроком есть небольшая проблема! В общем после написания статьи, статья выводится, но вместо ссылок или картинок у меня выводится сам BB-код... Что мне с этим делать, подскажите пожалуйста? Заранее спасибо.