Функция вставки 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 кодами
<span style="cursor:pointer;"></span>
<span style="cursor:pointer;">![](</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>)
Форма кода "a"
Прежде чем я вывешу код формы, хотел бы решить вопрос с дизайном этих форм. Откройте с начало файл style.css в папке admin и вставьте туда следующие стили:
Я не хочу грузить вас дизайнерским вопросом нашего проекта, поэтому просто скопируйте и сохраните не глядя
Вот теперь сама форма:
[HTML]<!--ФОРМА -->
<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>
<!--ФОРМА -->[/HTML]
Вставить этот кусок кода следует в наш шаблон addcontent.html в самый низ
Форма кода "img"
Этот кусок кода вставляется все в тот же шаблон, в самый низ:
Ну что ж, с формами вроде разобрались. Приступим к самой функции
О функции вставки тегов подробнее
Как я уже говорил, она будет выполнять две операции, разграничим визуально поле:
Функция имеет переменную step, она будет отслеживать какую операцию выполнять. Например если переменная step будет равна единице, то функция откроет форму тега "a", если переменная равна нулю, то вставит код "b" в текстовое поле, и т.д.
Открытие форм
Форм у нас две, значит операции по открытию будет тоже две, напишем их:
[JS]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";//открытие формы для тега
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега
Не удивляйтесь что переменная step имеет не порядковые цифры, функция у меня уже написана, я ее по частям копирую Теперь давайте сохраним ее и подключим. Сохранил я ее под название js.js в папке templates. Для подключения откройте файл index.html и после:
вставьте:
вот эту строку. Теперь откроем шаблон addcontent.html и пропишем вызов функции:
<span onclick="tags(1);" style="cursor:pointer;"></span>
<span onclick="tags(3);" style="cursor:pointer;">![](</span>
<span style="cursor:pointer;">[end]</span>
<!--ПАНЕЛЬ ББ КОДОВ-->)
Сохраним, и посмотрим открываются ли у нас формы? У меня ( я переношу, уже написанную функцию, по частям в админ панель ) все прекрасно работает.
Обработчик форм, добавляем код "b" и [end]
Начнем с простых обработчиков, ведь при добавление этих кодов ненужно обрабатывать форму, вставляем:
[JS]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";//открытие формы для тега
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега document.getElementById("txt_post").value += "[b])
";//BB код
//------------------
if(step == 5) document.getElementById("txt_post").value += "
Логика вставки такова: сохранить то что уже введено в текстовое поле, и прибавить к этому тексту bb код, после чего полученный текст вставить обратно в текстовое поле. Теперь отредактируем нашу панель, добавив в нее вызов функции:
[HTML] <!--ПАНЕЛЬ ББ КОДОВ-->
<span onclick="tags(0);" style="cursor:pointer;"></span>
<span onclick="tags(1);" style="cursor:pointer;"></span>
<span onclick="tags(3);" style="cursor:pointer;">![](</span>
<span onclick="tags(5);" style="cursor:pointer;">[end]</span>
<!--ПАНЕЛЬ ББ КОДОВ-->)
Теперь панель полностью готова можно сохранить и посмотреть работает ли она.
Обработчик форм, добавляем код "a"
Логика впринципе проста:
для начала мы сохраним то что ввели в форму
после чего с генерируем bb код
вставим полученный код в текстовое поле
сбросим то что вводили в форму кода "a"
Вот как это выглядит:
[JS]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";//открытие формы для тега
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега";//BB код
//------------------
if(step == 5) document.getElementById("txt_post").value += "[end]";//BB код [end] - кнопка "читать дальше"
//------------------
if(step == 2)//Вставляем бб код в форму ()
{
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 = "Введите текст ссылки";
//сброс
}
//------------------
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
}[/JS]
Все строки имеют комментарии, так что думаю разберетесь Отредактируем нашу форму, введе в нее вызов функции:
[HTML]<!--ФОРМА -->
<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>
<!--ФОРМА -->[/HTML]
Надеюсь Вы справились с этим пунктом
Функция выбора позиции изображения
Начнем пожалуй реализацию bb кода img именно с написания функции выбора позиции.
Обратите внимания, форма img имеет скрытое поле radio_pos. В нее будет сохраняться значение "l" - лево, "c" - центр, "r" - право. У каждой кнопки есть стиль font-weight:100 При нажатие на одну из трех кнопок, стиль кнопки будет меняться на font-weight:bold. Функция не сложная и однообразная. Она будет иметь переменную pos которая определит какую из кнопок подсветить, и какое значение вписать в поле radio_pos. Вот функция:
Обратите внимание, что цикл for используется для сброса стиля у кнопок. Если этого не делать, то щелкая на обе кнопки, подсветятся обе, а не одна. Сохраним эту функцию в файл js.js. Теперь отредактируем форму img, привяжем вызов функции к кнопкам:
Обработчик bb кода img
Нам осталось написать обработчик, и наши bb коды готовы. Логика такая же как и у bb кода "a" вот уже полный код функции:
[JS]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";//открытие формы для тега
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега [img]
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
if(step == 0) document.getElementById("txt_post").value += "";//BB код
//------------------
if(step == 5) document.getElementById("txt_post").value += "[end]";//BB код [end] - кнопка "читать дальше"
//------------------
if(step == 2)//Вставляем бб код в форму ()
{
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)//Вставляем бб код в форму (![]()
{
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 написанную нами часть функции:
Ну что ж, я заканчиваю эту статью, если есть какие вопросы, задавайте. Удачи Вам, скоро увидимся, у меня все!
С чего начать?
Давайте подумаем какие 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]</span><span style="cursor:pointer;"></span>
<span style="cursor:pointer;">
Форма кода "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;
}Я не хочу грузить вас дизайнерским вопросом нашего проекта, поэтому просто скопируйте и сохраните не глядя
Вот теперь сама форма:
[HTML]<!--ФОРМА -->
<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>
<!--ФОРМА -->[/HTML]
Вставить этот кусок кода следует в наш шаблон 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>
<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" в текстовое поле, и т.д.
Открытие форм
Форм у нас две, значит операции по открытию будет тоже две, напишем их:
[JS]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";//открытие формы для тега
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега
Не удивляйтесь что переменная 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]</span><span onclick="tags(1);" style="cursor:pointer;"></span>
<span onclick="tags(3);" style="cursor:pointer;">
Сохраним, и посмотрим открываются ли у нас формы? У меня ( я переношу, уже написанную функцию, по частям в админ панель ) все прекрасно работает.
Обработчик форм, добавляем код "b" и [end]
Начнем с простых обработчиков, ведь при добавление этих кодов ненужно обрабатывать форму, вставляем:
[JS]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";//открытие формы для тега
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега
//------------------
if(step == 5) document.getElementById("txt_post").value += "
";//BB код [end] - кнопка "читать дальше"
//------------------
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
}Логика вставки такова: сохранить то что уже введено в текстовое поле, и прибавить к этому тексту bb код, после чего полученный текст вставить обратно в текстовое поле. Теперь отредактируем нашу панель, добавив в нее вызов функции:
[HTML] <!--ПАНЕЛЬ ББ КОДОВ-->
<span onclick="tags(0);" style="cursor:pointer;"></span>
<span onclick="tags(1);" style="cursor:pointer;"></span>
<span onclick="tags(3);" style="cursor:pointer;">
Теперь панель полностью готова можно сохранить и посмотреть работает ли она.
Обработчик форм, добавляем код "a"
Логика впринципе проста:
для начала мы сохраним то что ввели в форму
после чего с генерируем bb код
вставим полученный код в текстовое поле
сбросим то что вводили в форму кода "a"
Вот как это выглядит:
[JS]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";//открытие формы для тега
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега
//------------------
if(step == 5) document.getElementById("txt_post").value += "[end]";//BB код [end] - кнопка "читать дальше"
//------------------
if(step == 2)//Вставляем бб код в форму ()
{
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 = "Введите текст ссылки";
//сброс
}
//------------------
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
}[/JS]
Все строки имеют комментарии, так что думаю разберетесь Отредактируем нашу форму, введе в нее вызов функции:
[HTML]<!--ФОРМА -->
<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>
<!--ФОРМА -->[/HTML]
Надеюсь Вы справились с этим пунктом
Функция выбора позиции изображения
Начнем пожалуй реализацию 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 кода img
Нам осталось написать обработчик, и наши bb коды готовы. Логика такая же как и у bb кода "a" вот уже полный код функции:
[JS]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";//открытие формы для тега
if(step == 3) window_tags_img.style.display = "block";//открытие формы для тега [img]
//-----------------ОТКРЫТИЕ ФОРМ ДЛЯ ЗАПОЛНЕНИЯ
//-----------------ОБРАБОТЧИК ЗАПОЛНЕННЫХ ФОРМ
if(step == 0) document.getElementById("txt_post").value += "";//BB код
//------------------
if(step == 5) document.getElementById("txt_post").value += "[end]";//BB код [end] - кнопка "читать дальше"
//------------------
if(step == 2)//Вставляем бб код в форму ()
{
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 написанную нами часть функции:
<!--ФОРМА [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]-->Ну что ж, я заканчиваю эту статью, если есть какие вопросы, задавайте. Удачи Вам, скоро увидимся, у меня все!
Похожие новости:
Комментарии:
Нету комментариев для вывода...