Приветствую Вас дорогой читатель! Добро пожаловать на продолжения цикла статей посвященной разработки CMS блога с нуля. Как я и обещал в предыдущей статье, сегодня мы займемся реализацией bb кодов. Для чего они собственно нужны? Как Вы могли заметить, редактором контента в нашей админ панели выступает обычная форма, при этом в этой форме запрещены html теги. Посему, для внесения каких то визуальных эффектов в наши посты, нам просто необходимы bb коды. BB код представляют собой аналог html тега. Такой код совершенно не понятен браузеру, но он понятен нашему скрипту, который опираясь на них, преобразует информацию в понятный для браузера вид. Я разобью эту статью на две части, в этой мы с Вами напишем javascript функцию, которая будет вставлять наши bb коды в текстовое поле, а в следующей статье мы напишем обработчик.
Давайте подумаем какие bb будем реализовывать.
Теперь давайте подумаем о самом процессе добавления bb код в форму
И того, цель сегодняшней статьи, написать панельку с bb кодами, две формы, и две функции на javascript. Хотел бы кое что сказать о функции добавления кодов. Она будет выполнять две операции, открытие форм для заполнения, и собственно само добавление кодов в текстовое поле.
Открываем наш шаблон 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>
<span style="cursor:pointer;">[a][/a]</span>
<span style="cursor:pointer;">[img]</span>
<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>
Прежде чем я вывешу код формы, хотел бы решить вопрос с дизайном этих форм. Откройте с начало файл 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]-->
<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>
<span id='radio_2' style='font-weight:100;cursor:pointer;'>center</span>
<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>
<span onclick="tags(1);" style="cursor:pointer;">[a][/a]</span>
<span onclick="tags(3);" style="cursor:pointer;">[img]</span>
<span style="cursor:pointer;">[end]</span>
<!--ПАНЕЛЬ ББ КОДОВ-->
Сохраним, и посмотрим открываются ли у нас формы? У меня ( я переношу, уже написанную функцию, по частям в админ панель ) все прекрасно работает.
Начнем с простых обработчиков, ведь при добавление этих кодов ненужно обрабатывать форму, вставляем:
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>
<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>
<!--ПАНЕЛЬ ББ КОДОВ-->
Теперь панель полностью готова можно сохранить и посмотреть работает ли она.
Логика впринципе проста:
Вот как это выглядит:
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>
<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'>
<p id='p_sub'>ОК</p>
</div>
</div>
</div>
<!--ФОРМА [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>
<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]-->
Ну что ж, я заканчиваю эту статью, если есть какие вопросы, задавайте. Удачи Вам, скоро увидимся, у меня все!
Исходник |
<textarea style="width:600px;height:600px;" name="txt_post" id="txt_post" rows="10">Введите текст*</textarea>
javascript работает точно, так как до этого с ним работал
http://markitup.jaysalvat.com/home/
Скачал. Распаковал. Пример с тэгами заработал на ура. Но мне нужен bbcode.
Скачал плагин для BBcode. сразу же обратил внимание на то, что есть двойное название. В примерах почему-то редактор называется smarkup
хотя в документации везде упоминается markitup.
И так, в этом плагиене в ридми написани, что нужно распаковать в папку настроек скрипта и прописать путь к bbcode/set.js и некоторым файлам стилей.
Обратил внимание на то, что папка bbcode уже существовала и в ней был какой-то conf.js. Я распаковал и все подключал как написано, но ничего не заработало.
В чем ошибка?
И что за файл такой bbcode/conf.js Зачем он нужен, если по документации вообще не нужно делать на него ссылку?
Но в самих комментах выводит только сами bb-коды.
Я только не пойму почему? Получается, что сам сайт не понимает коды!?
У меня на блоге есть простейший алгоритм. Более корректный парсер бб кодов можно найти в инете (в виде библиотеки)
Я же делал перевод в html во время добавление записи в БД. А для редактирование переводил обратно, что явно совершенно лишнее телодвижение.
Я тоже использую markitup шаблон default.
Суть в следующем... если при написании статьи надо показать допустим HTML код, то если теги <> заменить на сущности и сохранить, тогда при выводе код отображается. Но если его еще раз открыть в редакторе то он будет в виде тегов и при новом сохранении исполнится при выводе статьи...
Алексей, подскажите пожалуйста решение, как реализовано у Вас на сайте?