VPF::Простой BB-редактор - Форум программистов

iEmpire

Дата 21.5.2008, 20:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 21.5.2008

Репутация: нет
Всего: нет

Демо: тут

За вечер сделал простой 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!!!

Это сообщение отредактировал(а) iEmpire - 21.5.2008, 20:03

Присоединённый файл ( Кол-во скачиваний: 291 )

bb.rar 53,04 Kb

InferNo23

Дата 28.5.2008, 19:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 6.3.2007

Репутация: нет
Всего: нет

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

bars80080

Дата 29.5.2008, 09:34 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: нет
Всего: 315

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

Код


<!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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 5.10.2008

Репутация: нет
Всего: нет

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

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

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

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

bars80080

Дата 5.10.2008, 13:22 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: нет
Всего: 315

вопрос по 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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 346
Регистрация: 22.3.2005
Где: Deutschland

Репутация: нет
Всего: 9

Цитата(bars80080 @ 29.5.2008, 09:34

)

И хто бы это мог быть та? smile

прямой линк для владеющих немецким (IE 5.0+, Mozilla 1.0.1+, Netscape 4.79+ и Opera 5.12+)

EnoT

Дата 12.10.2008, 22:50 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 12.10.2008

Репутация: нет
Всего: нет

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

И ещё когда переменная 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 (ссылка)

(нет голосов)

Загрузка ...

Агент алкомафии

Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17

а как экранивать HTML и JavaScript есть я хочу написать в редактор?

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

monro

Дата 11.7.2009, 16:48 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 9.7.2009

Репутация: нет
Всего: нет

не правильно работает добавление видео, как это исправить
не заменяет тэги

Код


[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>

Это сообщение отредактировал(а) monro - 11.7.2009, 16:49

OutlawZ

Дата 9.9.2009, 16:33 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Awaiting Authorisation
Сообщений: 269
Регистрация: 19.10.2007

Репутация: нет
Всего: нет

Что то он не работает в демо только панель, попробовал его прикрутить с 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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 22.6.2009

Репутация: нет
Всего: нет

Цитата

Мда, заставил ты меня помучиться с чтением твоего вопроса 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>

Это сообщение отредактировал(а) REZER - 28.9.2009, 15:57

magician7

Дата 14.10.2009, 13:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 9
Регистрация: 7.5.2009
Где: Киев

Репутация: нет
Всего: нет

сор за оффтоп... deleted

Это сообщение отредактировал(а) magician7 - 14.10.2009, 14:09

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »