phpjsJqueryhtmlcssblog

DW-Bbcode 2.0 panel/панель с функцией + пример + скачать

Bbcode панель. Полноценная DW-Bbcode 2.0 panel со скриптами и примером! Как установить на сайт. Как настроить Bbcode панель?

Подробно о Bbcode панели!

1. Что такое DW-Bbcode panel 2.0
2. Как использовать Bbcode панель на сайте?
3. №2... использовать Bbcode панель на сайте?
4. Обработка данных записанных с Bbcode тегами.
5. Форма bbcode панели на сайт(только форма).
6. Новые обозначения
7. Живой пример Bbcode
8. Скачать можно здесь
Скачать bbcode панель.
P.S.

Скопировать ссылку



Что такое DW-Bbcode panel 2.0

Это уже... сбился со счета какая версия, потому, что было множество вариаций... поэтому перепрыгнем через 1 и будет:

DW-Bbcode 2.0

На отдельной странице вставлен обрабатывающий скрипт и форма.

В архиве этот файл index.php:

пример

Состав архива Bbcode панели:

Состав архива формируется из папки примера. Выведем всё содержание папки вживую:

Array

(

[0] => __smiles.php

[1] => _smaile

[2] => _smaile_girl

[3] => dwbbcode.php

[4] => example_bbcode.dat

[5] => include_bb.php

[6] => index.php

[7] => mullerlight.otf

)

Скопировать ссылку



Как использовать Bbcode панель на сайте?

Скачиваем архив Bbcode панель, извлекаем всё содержимое в любую папку на сайте. Ниже приведенный файл - основной для вывода и форы + запись + вывод результата. Пример основан на записи в файл. Подробнее о файле include_bb.php
После тега body html каркаса вставляем :

<? include $_SERVER['DOCUMENT_ROOT'].'/путь_до_папки/dw_bbcode_2/include_bb.php'; ?>
Для вывода Bbcode панели и формы ввода данных на странице вставляем вот такую строчку:
<?=$form_bbcode?>
Для вывода результатов вставляем на странице :
<?=$dw_textarea?>
Все выше приведенные телодвижения поставим на нашу страницу не прямо здесь, чуть ниже:
пример вставки на сайт
Абсолютно по аналогичной схеме подключения подключение "Bbcode панели" на отдельной странице - это файл index.php:
пример DW-Bbcode 2.0 - index.php

Файл include_bb.php

Данный файл "include_bb.php" основной, который участвует во всем веселье!

В качестве примера файл include_bb.php записывает

И читает файл примера

Строка № 12 Основной файл, в котором находится все... функция bbcodo -в, js-скрипт, форма,
include __DIR__.'/dwbbcode.php'; // основная функция
Строка № 13 Когда в примере, либо на странице с описанием вы нажимаете сохранить, то результат сохраняется на этой странице
$sf_file = __DIR__.'/example_bbcode.dat'; // файл сохранения
Строка № 14 Процесс записи в файл происходит в этих скобках.
if($_POST['submit']) { $dw_textarea = str_replace(array("\r\n", "\r", "\n"), "<br>", strip_tags($_POST['dw_textarea'] ) ); @file_put_contents($sf_file, $dw_textarea."\n".@file_get_contents($sf_file), LOCK_EX);}//записываем // post_submit
Строка № 15 Получаем из файла данные и обрабатываем функцией bbcode_dw, чтобы мы могли увидеть результат ббкодов..
$dw_textarea = bbcode_dw(str_replace("\n", "<br>\n", @file_get_contents($sf_file))); //получаем // bbcode_dw

Ну... и ниже идет переменная $form_bbcode, где стили и форма ввода...

Скопировать ссылку



№2... использовать Bbcode панель на сайте?

Это все замечательно! Но!

Мне нужна только панель с Bbcode.

Предположим, что вам(может быть множество причин) нужна только панель над вашим полем ввода.

И соответственно второе - нужно, чтобы вывести результат с декодированными Bbcode в html код.

Как это сделать?

Легко!

Аналогично используем include

Снова повторение... после тега body html каркаса вставляем(почему не в самом верху? Потому, что в "include_bb.php" и скрипты и стили! ) :

<? include $_SERVER['DOCUMENT_ROOT'].'/путь_до_папки/dw_bbcode_2/include_bb.php'; ?>

В нужном месте выводим форму с обязательным атрибутом атрибут name и значением dw_textarea

<form method="post">
<textarea class="" name="dw_textarea" style="display: block;height: 100px;width: 500px;" placeholder="Нажмите одну из кнопок сверху и нажмите отправить!"></textarea>
<input type="submit" name="submit2" value="Отправить">
</form>


Над формой помещаем вывод панели Bbcode :

<?=$panel_bbcode;?>

Не рассказываю, как получить данные из формы, потому, что мы это делали неоднократно ... вам понадобится :

post, чтобы обработать отправленные данные.

Если у вас база данных, то... вы должны немного знать о записи в базу
и выводе из базы.


Если у вас файлы, то вам следует внимательно изучить файл "index.php"(в архиве) - там разобраться не сложно!

Итого... у вас/нас должен получиться вот такой код:

  <!DOCTYPE html>

  <html lang="ru">

     <head>

        <meta charset="UTF-8">

        <title>Вывод только панели</title>

     </head>

     <body style="margin: auto;width: 600px;">

<? include $_SERVER['DOCUMENT_ROOT'].'/путь_до_папки/dw_bbcode_2/include_bb.php'; ?>

        <h1>Вывод только панели</h1>

        <?=$panel_bbcode;?>

        <form method="post">

           <textarea class="" name="dw_textarea" style="display: block;height: 100px;width:   500px;" placeholder="Нажмите одну из кнопок сверху и нажмите отправить!"></textarea>

        <input type="submit" name="submit2" value="Отправить">

         </form>

     </body>

  </html>

  <?

}

?>

Смотрим результат применения только одной панели bbcode:

Данная страница выводится с помощью get, на этой же странице, только в самом верху всего кода. Поэтому... никакие скрипты и стили на данный пример не влияют!

только одной панели bbcode

Скопировать ссылку



Обработка данных записанных с Bbcode тегами.

После того, как вы записали данные используя Bbcode панель вам нужно вывести их в декодированном виде, т.е. превратить из в html аналоги


Итак... предположим, что вы создали картинку типа:

В качестве примера давайте возьмем картинку :

[img]https://dwweb.ru/__img/bbcode.png[/img]

Помещаем её в переменную:

$example = '[img]https://dwweb.ru/__img/bbcode.png[/img]';

Далее используем функцию "bbcode_dw" и echo :

echo bbcode_dw($example);

Соберем весь код вместе:

$example = '[img]https://dwweb.ru/__img/bbcode.png[/img]';

echo bbcode_dw($example);

Далее нам остается только и всего-то вывести данный код прямо здесь:

['img']https://dwweb.ru/__img/bbcode.png[/img]

Как это используется bbcode панель у меня на сайте.

Если мы откроем данный код прямо в моем редакторе , то мы увидим вот такую картину:




Мне не нужно выводить отдельные части через функцию... вся страница обрабатывается этой функцией!

Вид bbcode панели:

Поверьте мне... все начиналось именно с bbcode, но у меня немного другой вид - это скорее html editor собственного производства, который был сделан так давно, что и не помню!

Его тоже надо как-то переделать!

Скопировать ссылку



Форма bbcode панели на сайт.

Тут собрался найти форму или панель bbcode без навешанных скриптов и обработчиков и оказалось, что панель bbcode по этим требованиям - просто не существует! Ну и потом решил сделать свою. Но давайте все по порядку!

С трудом нашел пару панелей bbcode




Вариант №1 панель bbcode

Где-то на просторах нашел вот такую панель bbcode для или от ukoz.
Эту панель запаковал в архив и его можно скачать




Вариант №2 панель bbcode noname

Вторая панель bbcode неизвестного производителя, ну вот простая форма... bbcode и добавить нечего.
скачать


Зачем нужна своя панель bbcode

Зачем изобретать велосипед и делать свою bbcode панель ?!

Если вы скачиваете что-то чужое, то чаще всего - скажу лишь свое мнение! Как -то я пытался пользоваться визуальным редактором ckeditor и когда он загружался, я не мог понять - откуда столько файлов и что они вообще делают - их было, что-то около 1.500, ну можно понять 10...20, ну в крайнем случае 50... вместе со смайлами, но 1.500 - в общем мне очень не понравилось!(я не говорю что редактор плохой! Но там реально столько не нужного!)

Если хочешь, что-то изучить -нужно попробовать что-то сделать самому!

Посмотрел несколько bbcode панелей - скукота страшная! Всё инкубаторское! Не нравится! Не хочу! Хочу отличаться!

В общем с какой стороны не посмотри, нужно делать свою!

Скопировать ссылку



Новые обозначения.

Добавлено несколько вариантов быстрого набора!

Если к примеру вспомнить название аськи трудно, то нарисовать на клавиатуре нужную аську просто! В связи с тем, что бывает, в текст вставляются именно такая последовательность знаков, то мы обернем их в квадратные скобки:


[:)] =

[:(] =

[.!.] =




Несколько тем мы ранее разобрали, надеюсь, что понимание, как работать с панелью bbcod-ов придет!






Скачать bbcode панель.

Скачиваем здесь.


Что в архиве? В архиве:

Архив формата ".zip"

В архиве копия примера.

Папка "dw_bbcode_2", заходим туда :

Папка "_smaile"

+ Папка "_smaile_girl".

Все смайлы смотри здесь



Описание всех операций с переменными смотри выше описание.

Как использовать скачанный архив?

Открываем архив.

Берем папку со всем содержимым перетаскиваем себе на сайт.

Открываем по адресу...

ваш_сайт.ru/путь_до_папки/dw_bbcode_2/index.php

Вы получите форму с панелью, как на данной странице

https://dwweb.ru/__a-data/__all_for_scripts/__examples/bbcode/dw_bbcode_2/index.php



P.S.

Все старые версии, примеры... и все что связано с моей bbcode панелью - всё в мусорку, кроме последней версии! Все архивы тоже в мусорку!

Её возьмем - переработаем, чтобы можно было пользоваться!

Пример вывода bbcode панели на сайт.

+ вывод результатов записи в файл.

H

H2

H3

H4

H5

L

B

B

STR

BLD

I

S

U

T1

KOD

FIO

RED

RBL

GRN

GBL

BL

T2

IMG

P

BR

HR

SCR

NAM

BUT

STY

NOI

TBL

LI

FS

xx-small

smaller

x-large

xx-large

FO

Arial

Times New Roman

Georgia

Monotype Corsiva

Comic Sans Ms

Tahoma

COL

:)

Кибер girl

?

Пример обработанного bbcod-а

3
1
красный_бордюр_красный_текст

1. Здесь_текст


2. Здесь_текст_2

Тег_абзаца

жирный_текстЦитата

1. Здесь_текст


2. Здесь_текст_2

• Здесь_текст


• Здесь_текст_2

анал

h2_заголовок

h3_заголовок

жирный_текст_strongкрасный_бордюр_красный_текст

• Здесь_текст


• Здесь_текст_2

Здесь_текст

h3_заголовок

h2_заголовок

псевдо_заголовок
красный_бордюр_красный_текстжирный_текст_bold

h5_заголовок

redЗдесь_текст

h2_заголовок

alert("document.xss")
alert("document.xss")
alert("document.xss");
alert("document.xss")
бордюр!!!

енвоненекненыынек


Здесь_текст
Здесь_текст
[script]alert('Привет мир!')[/script]

[*.!.*] = без звездочек
[*.!.*] = без звездочек
[*.!.*] = без звездочек
[*.!.*] = без звездочек

.!.

h2_заголовок

h2_заголовок

наклонный_текстurl_bbcode
наклонный_текстurl_bbcode
url_bbcode

h2_заголовок

url_bbcode

h2_заголовок

https://yandex.ru/
ghf
yty

h2_заголовок

жирный_текст_strongкрасный_бордюр_красный_текст

h2_заголовок

yellowgreenЦитата

Привет
sandybrown
жирный_текст
жирный_текст
красный_бордюр_красный_текстжирный_текст
Серый_фон_черный_текстЗдесь_текст
Зеленый_бордюр_зеленый_текстЦитата
красный_бордюр_красный_текст
sandybrowndassc

Тег_абзаца

жирный_текст


жирный_текст_strongнаклонный_текстПодчеркнутыйПодчеркнутыйЗеленый_текстЦитатаТег_noindex

h2_заголовок

navy

1. Здесь_текст


2. Здесь_текст_2

Можете потренироваться :
[left]Цитата[/left[royalblue]Цитата[/center]
Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---