Интернет, компьютеры, софт и прочий Hi-Tech

Подписаться через RSS2Email.ru

Показать HTML | Показать BBCode

Быстрый старт

Установка xBBEditora

Организовав обработку BBCode нужно подумать об удобствах пользователей, и дать им какой-нибудь редактор.

xBB может работать с ЛЮБЫМ редактором!!! Но если вы решили использовать xBBEditor, то должны сделать следующее:

Допустим, что код вашей формы, для редактирования текста выглядит так:

HTML
  1. <form method="post" action="my_action">
  2. <textarea name="my_textarea">
  3. Какой-то [i]BBCode[/i]
  4. </textarea>
  5. <input type="submit" value="Отправить" />
  6. </form>

Присвойте своей textarea какой нибудь уникальный id. Например, так:

HTML
  1. <form method="post" action="my_action">
  2. <textarea name="my_textarea" id="my_textarea_id">
  3. Какой-то [i]BBCode[/i]
  4. </textarea>
  5. <input type="submit" value="Отправить" />
  6. </form>

Где нибудь выше своей формы вставьте код JavaScript:

Javascript
  1. <script type="text/javascript" src="/ваш/путь/bbcode/xbb.js.php"></script>
  2. <script type="text/javascript">
  3. XBB.path = '/ваш/путь/bbcode'; // путь к либе
  4. XBB.textarea_id = 'my_textarea_id'; // идентификатор textarea
  5. XBB.area_width = '700px'; // ширина окошка редактора
  6. XBB.area_height = '400px'; // высота окошка редактора
  7. XBB.state = 'plain'; // 'plain' or 'highlight'
  8. // Одна из следующих строк должна быть раскомменчена
  9. XBB.lang = 'ru_utf8'; // русская локаль UTF-8
  10. // XBB.lang = 'ru_cp1251'; // русская локаль windows-1251
  11. </script>

Где нибудь ниже своей формы вставьте код:

Javascript
  1. <script type="text/javascript">XBB.init();</script>

Теперь идите на страницу с формой и смотрите, как чего работает. Well

P.S. Дополнительную информацию по установке и настройке редактора можно найти в FAQ. Ненужные функции, использование парсера и редактора.

Последнее редактирование: 2011-01-27 06:53:28

Метки материала: быстрый старт, xbbeditor, редактор bbcode, javascript, textarea, form, установка по


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

12.09.2007 13:12:48 #
Internet Explorer Гость Джеки
Я не понял, а если надо вставить таблицу?
12.09.2007 14:39:43 #
Mozilla Firefox dima
Вставляйте. Приведенные простейшие примеры HTML-форм никак этому не мешают. Форма может быть такой:
 
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>

и любой другой.
12.09.2007 18:46:26 #
Mozilla Firefox Гость
Спасибо за хороший редактор! So-so
Подскажите пожалуйста, если мне не нужны некоторые кнопки - как я могу их убрать, в конфигах что-то не нашел...
И вообще каким образом можно изменить внешний вид редактора?
12.09.2007 19:05:37 #
Mozilla Firefox dima
К сожалению, в настоящее время панель инструментов xBBEditor-а ненастраиваема. Чтобы ее изменить, придется лезть в код. Впрочем, убрать какие-то кнопки достаточно просто.
 
Откройте файл xbb.php. Найдите в нем код:
 
HTML
<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>-шку, вы удалите кнопку или разделитель.
 
В следующей версии постараюсь сделать этот ряд настраиваемым через конфиг.
13.09.2007 13:55:31 #
Mozilla Firefox Гость Aleksendr
Скажите, а как быть если надо добавить редактор для нескольких textarea-й на странице, или такая возмжность не предусморена?
13.09.2007 18:31:04 #
Mozilla Firefox dima
Такого я не предусматривал. Попробуйте создать копию объекта XBB (например, - CopyXBB) в коде JavaScript, переопределить ее свойства соответственно другой textarea и вызвать метод CopyXBB.init();.
 
Если возьметесь это делать, то, пожалуста, отпишитесь о результатах. Независимо от успеха.
27.09.2007 17:17:25 #
Opera Гость mookee
Спасибо за отличный легкий редактор!
Не совсем корректно работает вставка ссылки. При клике на иконке "Добавить ссылку", если в тексте есть выделение, редактор должен использовать выделение как подпись для ссылки, т.е. делать
Text
[url=введенная ссылка]выделение[/url]
. Сейчас он делает
Text
[url]введенная ссылка[/url]выделение
.
27.09.2007 21:22:25 #
Mozilla Firefox dima
Правильное предложение. Спасибо. Сделаю.
04.10.2007 23:47:31 #
Opera Гость Jon
А подскажите плиз как конкретнее создать 2 редактора одновременно Not so
а то я создал класс с CopyXBB и чтото не работает (
05.10.2007 01:56:27 #
Mozilla Firefox dima
Заплатка на скорую руку:
  1. Откройте файл 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']) : '') . "');";

  2. Содержимое файла 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';";
     
    ?>
    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 '';
    }

  3. Отредактируйте свою хтмл-ную форму соответственно примеру:
     
    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>

Тестил в ФФ - работает

Оставьте, пожалуйста, свой комментарий к публикации

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

Просьба не постить мусор. Если вы хотите потестить xBB, воспользуйтесь кнопкой предварительного просмотра на панели инструментов xBBEditor-а.


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