BB-коды таблиц для форума и быстрая конверсия таблиц

Полезные скрипты
Ответить
Аватара пользователя
mihas
Администратор
Сообщения: 1180
Зарегистрирован: 18 авг 2004, 16:58
Откуда: Москва
Контактная информация:

BB-коды таблиц для форума и быстрая конверсия таблиц

Сообщение mihas »

У меня форум достаточно технический и иногда требуется разместить таблицу в тело сообщения. Заворачивать ее в окошко code не так наглядно, как html разметка таблицы. Ну так все просто. Пишем в админке форума три парных бибикода, там уже есть образцы как это сделать, совершенно просто. Вот как у меня выглядит парный бибикод и его html замена полем ниже:

Код: Выделить всё

[table]{TEXT}[/table]
<table cellpadding="1" cellspacing="0" class="tablebbcode">{TEXT}</table>

[td]{TEXT}[/td]
<td class="tdbbcode">{TEXT}</td>
Вот такие парные бибикоды я сделал:

Код: Выделить всё

[table] [/table], [tr] [/tr], [td] [/td]
и соответствующие им парные теги html (можно прикрутить и оформление стилем к таблице) <table> </table>, <tr> </tr>, <td> </td>.
У меня в стиле для темы форума просто добавлено оформление примерно такое:

Код: Выделить всё

.tablebbcode {
	border-color: #a9c2b8 !important; 
	border-left: 1px solid;  !important; 
	border-right: 0px solid;  !important; 
	border-top: 1px solid;   !important; 
	border-bottom: 0px solid;  !important; 
	background-color: #f4f4f4;  !important; 
	margin: 5px 5px 5px 5px; !important; 
}

.tdbbcode {
	border-color: #a9c2b8 !important; 
	border-left: 0px solid;  !important; 
	border-right: 1px solid;  !important; 
	border-top: 0px solid;   !important; 
	border-bottom: 1px solid; !important; 
	padding-left:6px;  !important; 
	padding-right:6px;  !important; 
	color:#466046; !important; 
}
Чтобы пользователю было удобно переформатировать любую таблицу в бибикоды таблицы - пишем простенький скриптик и размещаем по ссылке.
Содержание скрипта собственно - разобрать табличку на массив и собрать обратно из массива с бибикодами, вот как собрать:

Код: Выделить всё

outtext = "[table]";
		for (i=0; i<input_cols; i++) {
			outtext += "[tr]";
			for(j=0; j<input_array[0].length; j++) {
				outtext += "[td]"+input_array[i][j] + "[/td]";
			}
			outtext += "[/tr]";
		}//end for
		outtext += "[/table]";
Ну например, мы имеем табличку:
1 2 3 4 5
apple mango banana limon orange

Обрабатываем скриптом по ссылке, получаем бибикод:

Код: Выделить всё

[table][tr][td]1[/td][td]2[/td][td]3[/td][td]4[/td][td]5[/td][/tr][tr][td]apple[/td][td]mango[/td][td]banana[/td][td]limon[/td][td]orange[/td][/tr][/table]
В теле сообщения форума этот бибикод будет выглядеть таблицей:
12345
applemangobananalimonorange
Хотите сменить в таблице колонки на строки - но проблем, короткий скрипт по ссылке поворачивает таблицу. Развернули, обработали в бибикод, получили результат:
1apple
2mango
3banana
4limon
5orange
Успешного программирования!
Ответить

Вернуться в «JavaScript»