Форумы xBB

Форумы xBB > BBCode и прочие языки упрощенной разметки

Несколько редакторов (XBB Editor)

Автор: Гость BuDulay. Последнее редактирование: 2011-05-12 16:37:56

Сколько не пробовал - не получается, писал разные скрипты для привязки каждого редактора XBB Editor к своему полю - не получается, даже пробовал с исходником поработать - что-то не очень разобрался.
 
Очень надеюсь на вашу помощь, делаю свой движок, и в новостях понадобилось делать краткую и полную новость.
 
28.03.2009

14 комментариев

30.03.2009 13:58:22 #
Iceweasel dima
Заплатка на скорую руку:
 
Первое. Откройте файл xbb.php. Найдите в нем строчку echo "var bb = new bbcode('');";. Замените на:
PHP
echo "var bb = new bbcode('');"
    . "bb.transportDiv=parent.document.getElementById('xbb_transport_div"
    . (isset($_GET['textarea']) ? htmlspecialchars($_GET['textarea']) : '') . "');";
30.03.2009 14:00:15 #
Iceweasel dima
Второе. Содержимое файла xbb.js.php замените на:
 
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';";
 
?>
30.03.2009 14:01:53 #
Iceweasel dima
PHP
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;
}
30.03.2009 14:02:51 #
Iceweasel dima
PHP
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 '';
}
30.03.2009 14:03:49 #
Iceweasel dima
Третье. Отредактируйте свою хтмл-ную форму соответственно примеру:
 
HTML
<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>

Тестил в ФФ - работает
12.12.2009 20:55:02 #
Неизвестный браузер Гость Ft
а если три или больше раз нужно вставить, то как?
12.12.2009 21:25:12 #
Mozilla Firefox dima
Аналогично:
 
Javascript
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();
13.12.2009 00:14:28 #
Opera Гость
Спасибо за этот код. Но в опере не работает. второй компонент отображает как просто textarea.. можно исправить?
13.12.2009 01:17:13 #
Mozilla Firefox dima
Вот этот код работает у меня как в FireFox'е, так и в Opera:
 
HTML
<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>
04.08.2010 08:57:47 #
Mozilla Firefox dima
Гость Олег
Вот выписка из примера:
HTML
<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 из примера:
 
Javascript
document.test.onsubmit = function(ev) {
    XBB.form_submit();
    XBB2.form_submit();
    XBB3.form_submit();
}
XBB.init();
XBB2.init();
XBB3.init();

Обратите внимание на обращение к форме: document.test. Это и есть искомая привязка. Измените имя формы в этом коде.

Ответить:

Представиться как     Антибот:
   

Просьба не постить мусор. Пользуйтесь кнопкой предварительного просмотра на панели инструментов редактора.

Введите логин: и пароль: (

© 2007-2017, Дмитрий Скоробогатов.
Разрешается воспроизводить, распространять и/или изменять материалы сайта
в соответствии с условиями GNU Free Documentation License,
версии 1.2 или любой более поздней версии, опубликованной FSF,
если только иное не указано в самих материалах.