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

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

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

Установка 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>
Биржа долевых инвестиций SIMEX.

Публикация сокращена для удобства обсуждения.
Полная версия: Установка xBBEditora на страницу сайта

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


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

02.03.2008 00:12:28 #
Mozilla Firefox dima
Смотрите файл bbcode/xbb.php. Найдите там
 
Код панели инструментов
<table id="toolbar" border="0" cellpadding="0" cellspacing="0"
style="background-image:url(./images/background.gif)">

<tr>
<td><img src="./images/left.gif" alt="" /></td>
 
<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_aboutProgramm();return false;"
 class="toolbarButton">
<img alt="About programm" src="./images/buttons/help.gif"
 id="img_help" />
</a></td>
 
<td><img src="./images/right.gif" alt="" /></td>
</tr>
</table>

Меняйте как хотите. Высота текстового поля задается строкой
 
Javascript
var height = (xbb_height - 66) + 'px';
08.05.2008 01:45:54 #
Internet Explorer Гость Алексей
Редактор отличный, но в Опере (8.01) к сожалению не работает.. ((
Наверное где-то какое-то условие для Оперы нужно. Видел редакторы наподобие в которых работало из оперы.
08.05.2008 09:57:13 #
Opera dima
Команда document.designMode = 'on'; Работает только в 9-й Опере.
 
А разве много у кого осталась 8-я Опера?
08.05.2008 11:02:32 #
Неизвестный браузер Гость Алексей
dima, Осталась =))
С неё , кстати, здесь и написать не получается.
Чем мне не нравится 9-ая Опера, это тем что там большие косяки с разметкой WML.
 
А с 8-ой оперой можно как-нибудь глюк исправить.
В js не очень силён ((
 
Например, тут: http://sunvas.info/Voting/ocenite_sajjt.htm внизу редактор прекрасно работает с 8-ой оперой
08.05.2008 11:12:40 #
Неизвестный браузер Гость Алексей
Ещё не плохо было бы добавить тег [spoiler=Картинка][/spoiler] (скрытый текст)
 
Реализовал на скорую руку так:
 
Код PHP:
PHP
/* Класс для тега [spoiler] */
class bb_spoiler extends bbcode {
    /* Является ли тег [spoiler] всегда закрытым  (наподобие [hr]) */
    var $is_close = false;
    /* Число разрывов строк, которые должны быть игнорированы перед тегом [spoiler] */
    var $lbr = 1;
    /* Число разрывов строк, которые должны быть игнорированы после тега [spoiler] */
    var $rbr = 1;
    /* Перечисляем теги, открытие которых должно привести к автоматическому
       закрытию тега [spoiler] */

    var $ends = array();
    /* Перечисляем теги, которые должны быть автоматически закрыты при открытии
       тега [spoiler] */

    var $stop = array('a','abbr','acronym','anchor','b','bbcode','code','color','email',
        'font','google','i','img','nobb','s','size','strike','sub','sup','tt',
        'u','url');
    /* Перечисляем теги, которым разрешено быть вложенными непосредственно в тег
       [spoiler] */

    var $children = array(
        'a','abbr','acronym','anchor','b','bbcode','code','color','email',
        'font','google','i','img','nobb','s','size','strike','sub','sup','tt',
        'u','url'
    );
    /* Перечисляем теги, непосредственно в которые разрешено вкладывать теги
       [spoiler] */

    var $parent = array('spoiler');
    /* Разрешено ли использовать тег [spoiler] в корне дерева
       элементов BBCode.
       (Не всем разрешено. Например, тегу [spoiler] запрещено) */

    var $top_level = true;
   
   
    /* Описываем конвертацию в HTML */
    function get_html() {
        $title = isset($this -> attrib['title']) ? $this -> attrib['title'] : 'скрытый текст';
       
        $result = '<div style="margin: 5px;">
            <div>
                <a style="color: #666; text-decoration: underline; font-weight: bold" href="#" onclick="return spoiler_js(this)"><span><b>[+] '
.$title.'</b></span><span style="display: none"><b>[-] '.$title.'</b></span></a>
            </div>
            <div style="display: none; border: #ccc 1px solid">
                '
.parent::get_html($this -> tree).'               
            </div>
        </div>'
;
        return $result;
    }
}

Код JavaScript:
Javascript
function spoiler_js(obj) {
  var obj_content = obj.parentNode.parentNode.getElementsByTagName('div')[1];
  var obj_text_show = obj.getElementsByTagName('span')[1];
  var obj_text_hide = obj.getElementsByTagName('span')[0];
 
  if (obj_content.style.display != '') {
    obj_content.style.display = '';
    obj_text_show.style.display = '';
    obj_text_hide.style.display = 'none';
  }
  else {
    obj_content.style.display = 'none';
    obj_text_show.style.display = 'none';
    obj_text_hide.style.display = '';
  }
  return false;
}
08.05.2008 14:10:28 #
Mozilla Firefox dima
Спасибо за код. Обязательно воспользуюсь.
 
Вопрос: Вы с какого браузера последние посты оставили? NetFront? Opera Mini?
08.05.2008 14:35:32 #
Internet Explorer Гость Алексей
dima, с эксплорера.
Просто подмена браузера на SonyEricsson стояла Well
 
С Opera 8.01 при добавлении комментария пишет "Комментарий без текста не может быть добавлен."
 
Я гадеюсь баг с Оперой возможно пофиксить.
08.05.2008 16:35:43 #
Mozilla Firefox dima
Нет большого желания искать и ставить на линух оперу 8.
 
В файле xbb.js.php найдите
 
Javascript
XBB.form_submit = function() {
    var iframe = document.getElementById(XBB.iframe_id).contentWindow;
    var state = iframe.document.forms.xbb.xbb_state.value;
    var textarea = document.getElementById(XBB.textarea_id);
    if ('highlight' == state) {
        var xbb_iframe = iframe.document.getElementById('xbb_iframe').contentWindow;
        try {
            textarea.value = XBB.innerText(xbb_iframe.document.body);
        } catch(e) {
            setTimeout("XBB.form_submit()", 0)
        }
    } else {
        textarea.value = iframe.document.forms.xbb.xbb_textarea.value;
    }
}

Замените так:
 
Javascript
XBB.form_submit = function() {
    alert(XBB.iframe_id);
    alert(document.getElementById);
    alert(document.getElementById(XBB.iframe_id));
    var iframe = document.getElementById(XBB.iframe_id).contentWindow;
    alert(iframe);
    alert(iframe.document);
    alert(iframe.document.forms);
    alert(iframe.document.forms.xbb);
    alert(iframe.document.forms.xbb.xbb_state);
    var state = iframe.document.forms.xbb.xbb_state.value;
    alert(state);
    alert(XBB.textarea_id);
    var textarea = document.getElementById(XBB.textarea_id);
    alert(textarea);
    if ('highlight' == state) {
        var xbb_iframe = iframe.document.getElementById('xbb_iframe').contentWindow;
        try {
            textarea.value = XBB.innerText(xbb_iframe.document.body);
        } catch(e) {
            setTimeout("XBB.form_submit()", 0)
        }
    } else {
        alert(iframe.document.forms.xbb.xbb_textarea);
        textarea.value = iframe.document.forms.xbb.xbb_textarea.value;
        alert(textarea.value);
    }
}

Если какой-то из алертов не сработает или выдаст 'undefined', то будем знать, где проблема.
08.05.2008 17:02:08 #
Internet Explorer Гость Алексей
Дмитрий, кнопка Send у меня и так работает.
Не работает сам визуальный редактор - теги не вставляются из панельки.
Может где ещё алеротов поставить, чтобы отловить исключительную ситуацию?
Пойду попробую.
08.05.2008 17:22:58 #
Mozilla Firefox dima
Алексей
при добавлении комментария пишет "Комментарий без текста не может быть добавлен."

При нажатии на кнопку "Оприавить" текст из ифрейма копируется в настоящую текстарию формы. Раз посылается пустой текст, значит копирование не работает.
 
За копирование отвечает XBB.form_submit. Вот я хочу проверить, где она обламывается.
 
Давайте разберемся с этим. Потом займемся кнопочками.

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

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

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


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