|
Форумы xBB > BBCode и прочие языки упрощенной разметки
Несколько редакторов (XBB Editor)
Автор: Гость BuDulay.
Последнее редактирование: 2011-05-12 16:37:56
Сколько не пробовал - не получается, писал разные скрипты для привязки каждого редактора XBB Editor к своему полю - не получается, даже пробовал с исходником поработать - что-то не очень разобрался.
Очень надеюсь на вашу помощь, делаю свой движок, и в новостях понадобилось делать краткую и полную новость.
28.03.2009
12 комментариев
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']) : '') . "');";
dima
Второе. Содержимое файла 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';";
?>
dima
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;
}
dima
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 '';
}
dima
Третье. Отредактируйте свою хтмл-ную форму соответственно примеру:
<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>
Тестил в ФФ - работает
Гость Ft
а если три или больше раз нужно вставить, то как?
dima
Аналогично:
XbbCopy3 = clone(XBB);
XbbCopy3.textarea_id = 'test_3';
XbbCopy3.iframe_id = 'xbb_editor3';
...
document.test.onsubmit = function(ev) {
XBB.form_submit();
XbbCopy.form_submit();
XbbCopy3.form_submit();
}
XBB.init();
XbbCopy.init();
XbbCopy3.init();
Гость
Спасибо за этот код. Но в опере не работает. второй компонент отображает как просто textarea.. можно исправить?
dima
Вот этот код работает у меня как в FireFox'е, так и в Opera:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Тест с 3-мя текстареа</title>
<script type="text/javascript" src='./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 = '.';
XBB.textarea_id = 'textarea1'; // идентификатор textarea
XBB.area_width = '700px';
XBB.area_height = '400px';
XBB.state = 'plain';
XBB.lang = 'ru_utf8';
XBB2 = clone(XBB);
XBB2.textarea_id = 'textarea2';
XBB2.iframe_id = 'xbb_editor2';
XBB3 = clone(XBB);
XBB3.textarea_id = 'textarea3';
XBB3.iframe_id = 'xbb_editor3';
</script>
</head>
<body>
<form action="action.php" name="test" method="post">
<textarea name="textarea1" id="textarea1"></textarea><br />
<textarea name="textarea2" id="textarea2"></textarea><br />
<textarea name="textarea3" id="textarea3"></textarea><br />
<input type="submit" value="Отправить" />
</form>
<script type="text/javascript">
document.test.onsubmit = function(ev) {
XBB.form_submit();
XBB2.form_submit();
XBB3.form_submit();
}
XBB.init();
XBB2.init();
XBB3.init();
</script>
</body>
</html>
dima
Гость Олег Вот выписка из примера:
<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>
Я обнаружил такой "дефект": если я изменяю аттрибут name тега form, то оба редактора не отображаются.
Странная привязка к имени "test".
Можно ли это как-то исправить ?
Обратите внимание на следующий код JavaScript из примера:
document.test.onsubmit = function(ev) {
XBB.form_submit();
XBB2.form_submit();
XBB3.form_submit();
}
XBB.init();
XBB2.init();
XBB3.init();
Обратите внимание на обращение к форме: document.test. Это и есть искомая привязка. Измените имя формы в этом коде.
Ответить:
|