Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Наши скрипты > Простой BB-редактор


Автор: iEmpire 21.5.2008, 20:02
user posted image
Демо: http://mobibuzzer.com/blog/9.html

За вечер сделал простой BB-редатор.
Кому нужно - забирайте.

Установка и использование:
Код

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bb.js"></script>

включите в <head> страницы.

к нужной <textarea> добавьте id="bb_textarea"

ну и сама панелька с кнопками:
Код

<div class="bb_bar">
<img src="bb_icons/bold.png" alt="Жирным" onClick="insert('b')"/>
<img src="bb_icons/italic.png" alt="Курсив" onClick="insert('i')"/>
<img src="bb_icons/underline.png" alt="Подчеркнуть" onClick="insert('u')"/>
<img src="bb_icons/align_justify.png" alt="По центру" onClick="insert('center')"/>
<img src="bb_icons/blockquote.png" alt="Цитата" onClick="insert('quote')"/>
<img src="bb_icons/insert_link.png" alt="Ссылка" onClick="insert('url')"/>
<img src="bb_icons/insert_image.png" alt="Картинка" onClick="insert('image')"/>
<img src="bb_icons/insert_youtube.png" alt="Видео YouTube" onClick="insert('youtube')"/>
</div>


По желанию можно добавить курсор "ладошка" к кнопкам
Код

.bb_bar img {
    cursor:pointer;
}


В архив включено демо редактора и функция, парсящая в html бб-теги.

Скрипт использует jQuery!!!

Автор: InferNo23 28.5.2008, 19:02
Подскажите как реализовать вставку тегов по краям выделенного текста, так же, как например, реализовано в форумах phpbb или в этом...
Спасибо.

Автор: bars80080 29.5.2008, 09:34
вот только-только кто-то сбрасывал в сосебней теме ссылку на немецкий ресурс (запамятовал где), отличный кросбраузерный метод:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Einf&uuml;gen von Inhalten in eine Textarea</title>
<script type="text/javascript">
<!--
function insert(aTag, eTag) {
  var input = document.forms['formular'].elements['eingabe'];
  input.focus();
  /* fur Internet Explorer */
  if(typeof document.selection != 'undefined') {
    /* Einfugen des Formatierungscodes */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = aTag + insText + eTag;
    /* Anpassen der Cursorposition */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -eTag.length);
    } else {
      range.moveStart('character', aTag.length + insText.length + eTag.length);      
    }
    range.select();
  }
  /* fur neuere auf Gecko basierende Browser */
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Einfugen des Formatierungscodes */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
    /* Anpassen der Cursorposition */
    var pos;
    if (insText.length == 0) {
      pos = start + aTag.length;
    } else {
      pos = start + aTag.length + insText.length + eTag.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* fur die ubrigen Browser */
  else
  {
    /* Abfrage der Einfugeposition */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("Einfugen an Position (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Einfugen des Formatierungscodes */
    var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
    input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
  }
}
//-->
</script>
</head>
<body>
  <h1>Demo: Einf&uuml;gen von Inhalten in eine Textarea</h1>
  <p>Positionieren Sie einfach den Cursor innerhalb der textarea oder markieren Sie Text darin.
     W&auml;hlen Sie dann "Einf&uuml;gen", um <code>[link]...[/link]</code> an dieser Stelle
     einf&uuml;gen zu lassen, sofern es der Browser erm&ouml;glicht.</p>
  <form name="formular" action="">
    <p><textarea name="eingabe" cols="30" rows="10">Ihre Nachricht</textarea></p>
    <p><input type="button" value="Einfugen" onClick="insert('[link]', '[/link]')"></p>
  </form>
</body>
</html>

Автор: 213123 5.10.2008, 11:37
Помогите плиз. Я всё сделал как скзано, но поему-то не парсятся BB еги в HTML. 

У меня в скрпите сделано так: Я ввожу в textarea текст, он заносится в бд и уже из БД выводится в таблицу. Так вот, всё сделано по инструкции, но текст не выделяется напрмиер жирным т.е выводится вот так: 213. Подскажите пажайлуста! 

PS Мб это связано с тем что файл parser.php не инклюдится никак? Елси да, то подскажите где его инклюдить. И да.. Так и не смог сделать что бы BB теги обрамляли выделенный текст по краям :(

PSS Прошу не пинать, я только начал увелкатся веб разработкой  smile 

Автор: bars80080 5.10.2008, 13:22
вопрос по php следует задавать в разделе php
по инструкции? ты б сказал ещё по велению свыше



Цитата(213123 @  5.10.2008,  11:37 Найти цитируемый пост)
но текст не выделяется напрмиер жирным т.е выводится вот так: 213

у тебя он выделен жирным. объясни конкретнее:
как вводишь текст, 
проверь что приходит после отправки сообщения: var_dump($_POST['name_your_textarea']);
проверь что вносится в БД
проверь что выбирается из БД
проверь что ты отдаёшь: var_dump($txt); где $txt = htmlspecialchars($txt), - переменная в которой содержимое текстарии, выбранное из твоей базы

Автор: Michael.de 10.10.2008, 17:51
Цитата(bars80080 @  29.5.2008,  09:34 Найти цитируемый пост)
вот только-только кто-то сбрасывал в сосебней теме ссылку на немецкий ресурс (запамятовал где), отличный кросбраузерный метод:
И хто бы это мог быть та? smile
http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/ для владеющих немецким (IE 5.0+, Mozilla 1.0.1+, Netscape 4.79+ и Opera 5.12+)

Автор: EnoT 12.10.2008, 22:50
Вообще весчь хорошая. Но есть несколько минус: Скрипт не обрамляет текст в теги, а добавляет их после текста

И ещё когда переменная my пуста (в случае например с url`ом) вписывается NULL, что собственно не оч хорошо, поэтому я добавил бы такую строчку:
Код

my = my != null ? my : '';


а вообще для бб-кодов я использую такой скрипт (кроссбраузерность и обрамляет текст)
Код

function bbcode(open, close){
    msgfield = (document.all) ? document.all.msg : document.forms['post']['msg'];

    /* IE */
    if (document.selection && document.selection.createRange){
        msgfield.focus();
        sel = document.selection.createRange();
        sel.text = open + sel.text + close;
        msgfield.focus();
    }
    /* Mozilla */
    else if (msgfield.selectionStart || msgfield.selectionStart == '0'){
        var startPos = msgfield.selectionStart;
        var endPos = msgfield.selectionEnd;

        msgfield.value = msgfield.value.substring(0, startPos) + open + msgfield.value.substring(startPos, endPos) + close + msgfield.value.substring(endPos, msgfield.value.length);
        msgfield.selectionStart = msgfield.selectionEnd = endPos + open.length + close.length;
        msgfield.focus();
    }
    /* Main browsers */
    else{
        msgfield.value += open + close;
        msgfield.focus();
    }
}

Автор: gcc 25.5.2009, 18:18
а как экранивать HTML и JavaScript есть я хочу написать  в редактор?

Автор: monro 11.7.2009, 16:48
не правильно работает добавление видео, как это исправить
не заменяет тэги 
Код

[video][/video]
 на 

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/\\1"></param><embed src="http://www.youtube.com/v/\\1" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

Автор: OutlawZ 9.9.2009, 16:33
Что то он не работает в демо только панель, попробовал его прикрутить с php в месте но не текст не ссылки он не выводит, может кто скажет как правильно его ставить????? 

Код

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bb.js"></script>
<style>
.bb_bar img {
    cursor:pointer;
}
</style>
</head>
<body>
<form method="post">
<textarea name="Name" id="bb_textarea" rows=10 cols=30></textarea>

<div class="bb_bar">
<img src="bb_icons/bold.png" alt="Жирным" onClick="insert('b')"/>
<img src="bb_icons/italic.png" alt="Курсив" onClick="insert('i')"/>
<img src="bb_icons/underline.png" alt="Подчеркнуть" onClick="insert('u')"/>
<img src="bb_icons/align_justify.png" alt="По центру" onClick="insert('center')"/>
<img src="bb_icons/blockquote.png" alt="Цитата" onClick="insert('quote')"/>
<img src="bb_icons/insert_link.png" alt="Ссылка" onClick="insert('url')"/>
<img src="bb_icons/insert_image.png" alt="Картинка" onClick="insert('image')"/>
<input type="submit" name="send">
</div>
</form>
<?php

if(isset($_POST['send']))
{
 print("$_POST['Name']");
}

?>
</body>
</html>


Добавил код PHP но он выводит сами BBCODE и текст в нем т.е не меняет оформление...может кто знает чем тема? Может парсер инклудить???? Знают что в раздел javascript пишу но может все таки есть кто тут уже поработал с этой темой ) smile 

Автор: REZER 28.9.2009, 15:57
Цитата
Добавил код PHP но он выводит сами BBCODE и текст в нем т.е не меняет оформление...может кто знает чем тема? Может парсер инклудить???? Знают что в раздел javascript пишу но может все таки есть кто тут уже поработал с этой темой )


Мда, заставил ты меня помучиться с чтением твоего вопроса  smile. Если я правильно понял, то вод как парсить:

Код

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bb.js"></script>
<style>
.bb_bar img {
    cursor:pointer;
}
</style>
</head>
<body>
<form method="post">
<textarea name="Name" id="bb_textarea" rows=10 cols=30></textarea>
<div class="bb_bar">
<img src="bb_icons/bold.png" alt="Жирным" onClick="insert('b')"/>
<img src="bb_icons/italic.png" alt="Курсив" onClick="insert('i')"/>
<img src="bb_icons/underline.png" alt="Подчеркнуть" onClick="insert('u')"/>
<img src="bb_icons/align_justify.png" alt="По центру" onClick="insert('center')"/>
<img src="bb_icons/blockquote.png" alt="Цитата" onClick="insert('quote')"/>
<img src="bb_icons/insert_link.png" alt="Ссылка" onClick="insert('url')"/>
<img src="bb_icons/insert_image.png" alt="Картинка" onClick="insert('image')"/>
<input type="submit" name="send">
</div>
</form>
<?php
if(isset($_POST['send']))
    {
        include( 'parser.php' );
        $Text = to_bb( $_POST['Name'] );
        echo "<br />".$Text;
    }
?>
</body>
</html>

Автор: magician7 14.10.2009, 13:17
сор за оффтоп... deleted

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)