ВотЪ… Хочу представить то, над чем долго работал… Может быть, работал бы меньше, если бы между Delphi и js небыло такой разницы, как регистрозависимость Так, не о том я… 
.
Итак, представляю вашему вниманию:
Гайд по писанию собственного bb-кода
с использованием js и (немного) CSS
Гайд расчитан на среднего программиста в js, особенно его вторая реализация.
Предположим, нам надо создать bb-код, назовём его [mybb][/mybb]. В нём нет параметров, поэтому сделать его просто:
<script>
$(".post .post-content").each(function(){
var L = $(this).html();
var arr = L.split("[mybb]");
var R = arr[0];
for (var i = 1; i < arr.length; i++)
{
var st = arr[i];
var text = st.substring(0, st.indexOf("[/mybb]"));
var another = st.substring(st.indexOf("[/mybb]")+7); // 7 – длина закрывающего тега. В нашем случае – 7: [/mybb]
R += "<span style=\"" + /*Стиль, которым надо оформить текст в теге*/ + "\">" + text + "</span>" + another;
}
$(this).html(R);
});
</script>
Собственно говоря – всё, теперь всё, что находится в теге [mybb][/mybb] Будет выделяться нужным нам стилем.
Теперь задача сложнее: создать тег с условием. Примером такому тегу может служить тег
[quote=<имя>][/quote]
Предположим, нам надо создать тег [mybb1=<условие>][/mybb1], который будет выделять определённым стилем текст. Пусть это будет цвет (просто для примера). Тогда можно добавить функцию GenStyle, в которой будет генерироваться нужный нам стиль. Делается это так:
<script>
function GenStyle(name)
{
var Result = "color:" + name;
return Result;
}$(".post .post-content").each(function(){
var L = $(this).html();
var arr = L.split("[mybb1=");
var R = arr[0];
for (var i = 1; i < arr.length; i++)
{
var st = arr[i];
var param = st.substring(0, st.indexOf("]"));
var text = st.substring(st.indexOf("]")+1, st.indexOf("[/mybb1]"));
var another = st.substring(st.indexOf("[/mybb1]")+8); // 8 – длина закрывающего тега. В нашем случае – 8: [/mybb1]
R += "<span style=\"" + GenStyle(param) + "\">" + text + "</span>" + another;
}
$(this).html(R);
});
</script>
Цветом выделено место, где задаётся стиль.
Вот и всё, готово.
Правда, надо сказать, что эта система далека от идеала. Его минусы:
- Отсутствие защиты от дураков;
- Невозможность «вложения» одинаковых bb-кодов друг в друга.
- Требуется знание CSS администратору, который занимается созданием этого bb-кода. Но этого никуда не уйти…
Возможно, я буду это делать, но я не уверен…
В ближайших планах:
1) Смешанное условие: условие состоящие из 2 и более параметров
2) Отслеживание наличия условия
3) Bb-коды для «извращенцев»: создание своих html-тегов, не являющихся индексируемыми браузерами (он их просто выидывает), но он индексируемых CSS. Делается это ещё проще, но условие добавлять к такому очень трудно.
А, чуть не забыл… Для тега [mybb][/mybb].
<style>
#button-mybb {
background-image:url('Ссылка на иконку');
padding:0;
line-height:0;
background-position:center;
background-repeat:no-repeat;
height:26px;
width:100%}
</style>
<script type="text/javascript">
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(17).innerHTML="<img src='/i/blank.gif' title='Название вашего тега' id='button-mybb' onclick=\"bbcode('[mybb]', '[/mybb]');\"/>"
</script>
А теперь для тега [mybb1=<условие>][/mybb1]. Так как я ещё не заморачивался такими вещами, как выпадающие списки, то он вставляет пока просто имя пользователя, который его вставил.
<style>
#button-mybb1 {
background-image:url('Ссылка на иконку');
padding:0;
line-height:0;
background-position:center;
background-repeat:no-repeat;
height:26px;
width:100%}
</style>
<script type="text/javascript">
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(17).innerHTML="<img src='/i/blank.gif' title='Название вашего тега' id='button-mybb1' onclick=\"bbcode('[mybb1='+ UserLogin+']', '[/mybb1]');\"/>"
</script>
Теперь по цветам:
- Красный цвет – вставить то, что написано этим цветом (ссылку, надпись)
- Синий цвет – место в панеле форматирования над полем ввода, куда надо всунуть иконку с вашим bb-кодом.
- Зелёный цвет – части, которые выделены этим цветом обязательно должны совпадать.
P.S. Данная редакция гайда далеко не последняя, она будет дополняться и дополняться. Я обещаю, что долго не брошу эту тему…
P.P.S. Система проверена на моём экспериментальным сайте и на сайте ролевой, на которой я являюсь администратором. Там это реализовано как «Персональные модераторские теги». Позже я выложу на этом форуме исходный код. Ссылку не кидаю, так как не хочу лишний раз нарываться на неприятности с рекламой…
P.P.P.S. Выражаю благодарность Deff за помощь с js. Ибо я бы сам никогда не справился. Правда, помог он мне только вытягивать html код из поста… Но всё равно спасибо!
Отредактировано kozhilya (Ср, 23 Ноя 2011 19:47:46)
А не проще - на этапе анализа HTML и превращения BB- кода в текст HTML - данному заменяющему
