|
Показать HTML | Показать BBCode
Быстрый старт
Установка xBBEditora
Организовав обработку BBCode нужно подумать об удобствах пользователей, и дать им какой-нибудь редактор.
xBB может работать с ЛЮБЫМ редактором!!! Но если вы решили использовать xBBEditor, то должны сделать следующее:
Допустим, что код вашей формы, для редактирования текста выглядит так:
<form method="post" action="my_action">
<textarea name="my_textarea">
Какой-то [i]BBCode[/i]
</textarea>
<input type="submit" value="Отправить" />
</form>
Присвойте своей textarea какой нибудь уникальный id. Например, так:
<form method="post" action="my_action">
<textarea name="my_textarea" id="my_textarea_id">
Какой-то [i]BBCode[/i]
</textarea>
<input type="submit" value="Отправить" />
</form>
Где нибудь выше своей формы вставьте код JavaScript:
<script type="text/javascript" src="/ваш/путь/bbcode/xbb.js.php"></script>
<script type="text/javascript">
XBB.path = '/ваш/путь/bbcode'; // путь к либе
XBB.textarea_id = 'my_textarea_id'; // идентификатор textarea
XBB.area_width = '700px'; // ширина окошка редактора
XBB.area_height = '400px'; // высота окошка редактора
XBB.state = 'plain'; // 'plain' or 'highlight'
// Одна из следующих строк должна быть раскомменчена
XBB.lang = 'ru_utf8'; // русская локаль UTF-8
// XBB.lang = 'ru_cp1251'; // русская локаль windows-1251
</script>
Где нибудь ниже своей формы вставьте код:
<script type="text/javascript">XBB.init();</script>
Теперь идите на страницу с формой и смотрите, как чего работает. 
P.S. Дополнительную информацию по установке и настройке редактора можно найти в FAQ. Ненужные функции, использование парсера и редактора.
Последнее редактирование: 2011-01-27 06:53:28
Метки материала:
быстрый старт, xbbeditor, редактор bbcode, javascript, textarea, form, установка по
116 комментариев
Гость Джеки
Я не понял, а если надо вставить таблицу?
dima
Вставляйте. Приведенные простейшие примеры HTML-форм никак этому не мешают. Форма может быть такой:
<form method="post" action="my_action">
<table>
<tr><td>Какое-то поле:</td><td><input name="some_input" /></td></tr>
<tr><td colspan="2">
<textarea name="my_textarea" id="my_textarea_id">
Какой-то [i]BBCode[/i]
</textarea>
</td></tr>
<tr><td></td><td><input type="submit" value="Отправить" /></td></tr>
</table>
</form>
и любой другой.
Гость
Спасибо за хороший редактор! 
Подскажите пожалуйста, если мне не нужны некоторые кнопки - как я могу их убрать, в конфигах что-то не нашел...
И вообще каким образом можно изменить внешний вид редактора?
dima
К сожалению, в настоящее время панель инструментов xBBEditor-а ненастраиваема. Чтобы ее изменить, придется лезть в код. Впрочем, убрать какие-то кнопки достаточно просто.
Откройте файл xbb.php. Найдите в нем код:
<td><a href="#" onclick="xbb_insertSimpleTags('b');return false;"
class="toolbarButton"><img alt="[b]" src="./images/buttons/bold.gif"
id="img_b" /></a></td>
<td><a href="#" onclick="xbb_insertSimpleTags('i');return false;"
class="toolbarButton"><img alt="[i]" src="./images/buttons/italic.gif"
id="img_i" /></a></td>
<td><a href="#" onclick="xbb_insertSimpleTags('u');return false;"
class="toolbarButton"><img alt="[u]" src="./images/buttons/underline.gif"
id="img_u" /></a></td>
<td><a href="#" onclick="xbb_insertSimpleTags('s');return false;"
class="toolbarButton"><img alt="[s]" src="./images/buttons/s.gif"
id="img_s" /></a></td>
<td><img src="./images/separator.gif" alt="" /></td>
<td><a href="#" onclick="xbb_insertSimpleTags('sub');return false;"
class="toolbarButton"><img alt="[sub]" src="./images/buttons/sub.gif"
id="img_sub" /></a></td>
<td><a href="#" onclick="xbb_insertSimpleTags('sup');return false;"
class="toolbarButton"><img alt="[sup]" src="./images/buttons/sup.gif"
id="img_sup" /></a></td>
<td><img src="./images/separator.gif" alt="" /></td>
Это - список кнопок и разделителей. Удалив в этом коде <td>-шку, вы удалите кнопку или разделитель.
В следующей версии постараюсь сделать этот ряд настраиваемым через конфиг.
Гость Aleksendr
Скажите, а как быть если надо добавить редактор для нескольких textarea-й на странице, или такая возмжность не предусморена?
dima
Такого я не предусматривал. Попробуйте создать копию объекта XBB (например, - CopyXBB) в коде JavaScript, переопределить ее свойства соответственно другой textarea и вызвать метод CopyXBB.init();.
Если возьметесь это делать, то, пожалуста, отпишитесь о результатах. Независимо от успеха.
Гость mookee
Спасибо за отличный легкий редактор!
Не совсем корректно работает вставка ссылки. При клике на иконке "Добавить ссылку", если в тексте есть выделение, редактор должен использовать выделение как подпись для ссылки, т.е. делать [url=введенная ссылка]выделение[/url] . Сейчас он делает [url]введенная ссылка[/url]выделение .
dima
Правильное предложение. Спасибо. Сделаю.
Гость Jon
А подскажите плиз как конкретнее создать 2 редактора одновременно 
а то я создал класс с CopyXBB и чтото не работает (
dima
Заплатка на скорую руку:
- Откройте файл xbb.php. Найдите в нем строчку echo "var bb = new bbcode('');";. Замените на:
echo "var bb = new bbcode('');"
. "bb.transportDiv=parent.document.getElementById('xbb_transport_div"
. (isset($_GET['textarea']) ? htmlspecialchars($_GET['textarea']) : '') . "');";
- Содержимое файла xbb.js.php замените на:
<?php
/******************************************************************************
бла-бла-бла
******************************************************************************/
header('Content-type: application/x-javascript; charset=utf-8');
require_once './config/editor.config.php';
$xbb = new Xbb;
?>
if (typeof XBB == "undefined") { var XBB = {}; }
<?php
// Умолчальные значения настроек:
echo "XBB.path = '{$xbb->path}';"
. "XBB.textarea_id = '{$xbb->textarea_id}';"
. "XBB.area_width = '{$xbb->area_width}';"
. "XBB.area_height = '{$xbb->area_height}';"
. "XBB.state = '{$xbb->state}';"
. "XBB.lang = '{$xbb->lang}';"
. "XBB.iframe_id = 'xbb_editor';";
?>
XBB.init = function() {
// Проверяем, возможна ли подсветка синтаксиса
if (! document.execCommand) {
this.state = 'plain';
}
// Textarea, с которой будем работать.
var textarea = document.getElementById(this.textarea_id);
if (! textarea) { return null; }
// Если iframe уже создан, ничего не делаем, завершаем инициализацию.
if (document.getElementById(this.iframe_id)) { return null; }
var parent_textarea = textarea.parentNode;
// Create a invisible div is accessible from iframe for a transport text
var div = document.createElement('div');
div.setAttribute('id', 'xbb_transport_div' + this.textarea_id);
parent_textarea.appendChild(div);
if (document.body.textContent) {
div.textContent = textarea.value;
} else {
div.innerText = textarea.value;
}
div.style.display = 'none';
// Создаем iframe.
var iframe = document.createElement('iframe');
iframe.id = this.iframe_id;
iframe.frameBorder = 0;
var src = this.path + '/xbb.php?state=' + this.state + '&textarea='
+ this.textarea_id;
if (this.lang) { src += '&lang=' + this.lang; }
iframe.src = src;
parent_textarea.insertBefore(iframe, textarea);
iframe.style.width = this.area_width;
iframe.style.height = this.area_height;
iframe.style.border = '1px solid #a9b8c2';
// Скрываем textarea
textarea.style.display = 'none';
// Назначаем функцию, срабатывающую при сабмите
//textarea.form.onsubmit = function(ev) { this.form_submit(); }
return true;
}
XBB.form_submit = function() {
var iframe = document.getElementById(this.iframe_id).contentWindow;
var state = iframe.document.forms.xbb.xbb_state.value;
var textarea = document.getElementById(this.textarea_id);
if ('highlight' == state) {
var xbb_iframe = iframe.document.getElementById('xbb_iframe').contentWindow;
try {
textarea.value = this.innerText(xbb_iframe.document.body);
} catch(e) {
setTimeout("this.form_submit()", 0)
}
} else {
textarea.value = iframe.document.forms.xbb.xbb_textarea.value;
}
}
/*
Текстовое содержимое узла с заменой <br /> на разрыв строки и окрыжением
<p> разрывами строк.
*/
XBB.innerText = function(node) {
if (node.innerText) {
return node.innerText;
}
if (node.textContent) {
for (var t = [], l = (c = node.childNodes).length, p, i = 0; i < l; i++) {
t[t.length] =
'p' == (p = c[i].nodeName.toLowerCase())
? '\n' + c[i].textContent + '\n'
: 'br' == p ? '\n' : c[i].textContent;
}
return t.join('');
}
return '';
}
- Отредактируйте свою хтмл-ную форму соответственно примеру:
<script type="text/javascript" src='./bbcode/xbb.js.php'></script>
<script type="text/javascript">
function clone(object)
{
if (typeof(object) != "object") return object;
var newObject = object.constructor();
for (objectItem in object) {
newObject[objectItem] = clone(object[objectItem]);
}
return newObject;
}
XBB.path = './bbcode';
XBB.textarea_id = 'test_1'; // идентификатор textarea
XBB.area_width = '700px';
XBB.area_height = '400px';
XBB.state = 'plain'; // 'plain' or 'highlight'
XBB.lang = 'ru_utf8'; // локализация
XbbCopy = clone(XBB);
XbbCopy.textarea_id = 'test_2';
XbbCopy.iframe_id = 'xbb_editor2';
</script>
<form action="my_action.php" name="test" method="post">
<textarea name="textarea1" id="test_1">текст 1</textarea>
<textarea name="textarea2" id="test_2">текст 2</textarea>
<input type="submit" value="Send" />
</form>
<script type="text/javascript">
document.test.onsubmit = function(ev) {
XBB.form_submit();
XbbCopy.form_submit();
}
XBB.init();
XbbCopy.init();
</script>
Тестил в ФФ - работает
Оставьте, пожалуйста, свой комментарий к публикации
|