MyBBCode — библиотека

Страница: 1

Сообщений 1 страница 8 из 8

Поделиться12021-06-14 13:06:01

Автор: kozhilya
Администратор
Зарегистрирован: 2020-11-17
Приглашений: 0
Сообщений: 30
Провел на форуме:
1 день 0 часов
Последний визит:
2024-02-07 19:43:33

MyBBCode

MyBBCode — гибкий инструмент для работы с BB-кодами на форумах, основанных на платформе mybb.ru.

Обзор / Документация / Библиотека

Разработано kozhilya, 2020 — 2021. Текущая версия — 1.2.

Указания к библиотеке скриптов

Все скрипты, указанные здесь, состоят из 3 частей (некоторые могут быть пропущены по ненадобности).

Регистрация кода в админ-панели. Для этого необходимо зайти в "Администрирование" / "Формы" / "Пользовательские bb-теги" и добавить указанный код как отдельную строку в поле. Этот пункт может быть пропущен для адаптации старых тегов, которые не оформлялись в отдельные теги.
Основной код тега. Код, который непосредственно обрабатывает тег. JavaScript-составляющую необходимо поместить в HTML-верх.
Кнопка формы ответа. Код, который добавляет кнопку тега в форму ответа. JavaScript-составляющую необходимо поместить в HTML-верх.

Шаблон кода сообщения

Код:

[title][example] — Название тега[/title]

Описание
[url=https://1]Оригинальная версия ()[/url]

[demo]
[kbd]example:i[/kbd]

[block=main code*-javascript][code*]
// Основное действие кода
MyBBCode.addTag('example', (elem, selector, set_html) => {
    
});
[/code*][/block]

[block=main code*-css][code*]
.custom_tag_example {
    /* code* */
}
[/code*][/block]

[block=button code*-javascript][code*]
MyBBCode.addEditorButton('example', {
    name: "Название тега",
    onclick: () => bbcode*('[example]', '[/example]'),
}, 'additional');
[/code*][/block]

[block=button code*-css][code*]
#button-example {
    background: url(https://example.com/example.png) no-repeat center;
}
[/code*][/block]

[quote]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed lorem at ligula fermentum scelerisque vitae semper quam. Donec pharetra tellus eget neque viverra, vitae sodales urna facilisis. Etiam lectus eros, dictum sed velit nec, laoreet ornare nisi.

 [example] Nulla suscipit velit non nisl tempor, ut convallis orci semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eleifend leo eu nibh ornare, congue commodo lorem facilisis. Proin ornare sodales ipsum, ut condimentum diam gravida vitae. [/example] 

Phasellus id tortor enim. Sed accumsan eros non enim fermentum, eu commodo metus tincidunt. Morbi bibendum dapibus orci interdum dictum. Ut nec consectetur diam, id imperdiet quam.[/quote]
[/demo]

Поделиться22021-06-14 13:07:59

Автор: kozhilya
Администратор
Зарегистрирован: 2020-11-17
Приглашений: 0
Сообщений: 30
Провел на форуме:
1 день 0 часов
Последний визит:
2024-02-07 19:43:33

Фон сообщения (Legacy-версия)

Оригинальная версия от Deff.

Код:

MyBBCode.addAdapter((container) => {
    $('a[href$="PostBgColor"] span', container).each((i, element) => {
        const color = $(element).css('color');
        const quote = $('.quote-box', container);
        
        container.css({'background-color':color});
        //quote.css({'background-color':color}); //Если нужна окраска цитат - первые две палки убираем
    });
});

Код:

MyBBCode.addEditorButton('bgColor', {
    name: "Название тега",
    onclick: () => bbcode('[url=http://PostBgColor]', '[/url]'),
}, 'table');

Код:

#button-bgColor {
    background: url(http://s3.uploads.ru/NqSiY.gif) no-repeat center;
    background-size: contain;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed lorem at ligula fermentum scelerisque vitae semper quam. Donec pharetra tellus eget neque viverra, vitae sodales urna facilisis. Etiam lectus eros, dictum sed velit nec, laoreet ornare nisi.

Phasellus id tortor enim. Sed accumsan eros non enim fermentum, eu commodo metus tincidunt. Morbi bibendum dapibus orci interdum dictum. Ut nec consectetur diam, id imperdiet quam.

Поделиться32021-06-14 14:26:19

Автор: kozhilya
Администратор
Зарегистрирован: 2020-11-17
Приглашений: 0
Сообщений: 30
Провел на форуме:
1 день 0 часов
Последний визит:
2024-02-07 19:43:33

[postbg] — Фон сообщения (цвет)

Окрашивает сообщение в указанный цвет.

postbg:sato

Код:

MyBBCode.addAdapter((container) => {
    $('.custom_tag_postbg', container).each((i, element) => {
        const color = $(element).attr('alt');
        const quote = $('.quote-box', container);
        
        container.css({'background-color':color});
        //quote.css({'background-color':color}); //Если нужна окраска цитат - первые две палки убираем
    });
});

Код:

MyBBCode.addEditorButton('postbg', {
    name: "Фон сообщения",
    onclick: () => {
        const color = prompt('Введите фоновый цвет сообщения', 'red');
        smile(`[postbg=${color}]`);
    },
}, 'table');

Код:

#button-postbg {
    background: url(http://s3.uploads.ru/NqSiY.gif) no-repeat center;
    background-size: contain;
}

[postbg=red]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed lorem at ligula fermentum scelerisque vitae semper quam. Donec pharetra tellus eget neque viverra, vitae sodales urna facilisis. Etiam lectus eros, dictum sed velit nec, laoreet ornare nisi.

Phasellus id tortor enim. Sed accumsan eros non enim fermentum, eu commodo metus tincidunt. Morbi bibendum dapibus orci interdum dictum. Ut nec consectetur diam, id imperdiet quam.

Поделиться42021-06-14 14:35:37

Автор: kozhilya
Администратор
Зарегистрирован: 2020-11-17
Приглашений: 0
Сообщений: 30
Провел на форуме:
1 день 0 часов
Последний визит:
2024-02-07 19:43:33

[good] — Отметка "Одобрено"

Оригинальная версия (Fover)

good

Код:

.custom_tag_good {
    clear: both;
    text-shadow: none;
    padding: 15px;
    line-height: 17px;
    background: #d1f7b6;
    border: 1px solid #8bca61;
    color: #5e9537;
}

Код:

if ($('#pun').hasClass('.ismoderator')) {
    MyBBCode.addEditorButton('good', {
        name: "Одобрено",
        onclick: () => bbcode('[good]', '[/good]'),
    }, 'additional');
}

Код:

#button-good {
    background: url(http://www.iconsearch.ru/uploads/icons/circularicons/16x16/yes.png) no-repeat center;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed lorem at ligula fermentum scelerisque vitae semper quam. Donec pharetra tellus eget neque viverra, vitae sodales urna facilisis. Etiam lectus eros, dictum sed velit nec, laoreet ornare nisi.

[good]Nulla suscipit velit non nisl tempor, ut convallis orci semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eleifend leo eu nibh ornare, congue commodo lorem facilisis. Proin ornare sodales ipsum, ut condimentum diam gravida vitae.[/good]

Phasellus id tortor enim. Sed accumsan eros non enim fermentum, eu commodo metus tincidunt. Morbi bibendum dapibus orci interdum dictum. Ut nec consectetur diam, id imperdiet quam.

Поделиться52021-06-14 17:22:16

Автор: kozhilya
Администратор
Зарегистрирован: 2020-11-17
Приглашений: 0
Сообщений: 30
Провел на форуме:
1 день 0 часов
Последний визит:
2024-02-07 19:43:33

[frame] — Фрейм

Оригинальная версия (zomby, Romych)

frame

Код:

// Основное действие кода
MyBBCode.addTag('frame', (elem, selector, set_html) => {
    const href = $(elem).text();
    set_html(`<iframe src="${href}" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="auto" width="100%" height="400" ></iframe>`);
});

Код:

.custom_tag_example {
    /* code */
}

Код:

MyBBCode.addEditorButton('frame', {
    name: "Фрейм",
    onclick: () => {
        const enteredURL = prompt("Введите ссылку для фрейма", "http://");
        if (!enteredURL) { return; }
        insert(`[frame]${enteredURL}[/frame]`);
    },
}, 'additional');

Код:

#button-frame {
    background: url(http://img265.imageshack.us/img265/9213/frame1.gif) no-repeat center;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed lorem at ligula fermentum scelerisque vitae semper quam. Donec pharetra tellus eget neque viverra, vitae sodales urna facilisis. Etiam lectus eros, dictum sed velit nec, laoreet ornare nisi.

[frame]https://mybb.ru/[/frame]

Phasellus id tortor enim. Sed accumsan eros non enim fermentum, eu commodo metus tincidunt. Morbi bibendum dapibus orci interdum dictum. Ut nec consectetur diam, id imperdiet quam.

Поделиться62021-06-14 18:02:33

Автор: kozhilya
Администратор
Зарегистрирован: 2020-11-17
Приглашений: 0
Сообщений: 30
Провел на форуме:
1 день 0 часов
Последний визит:
2024-02-07 19:43:33

[shadow] — Шрифт с тенью

Оригинальная версия (Romych)

shadow:ia

Код:

// Основное действие кода
MyBBCode.addTag('shadow', (elem) => {
    elem.css('text-shadow', elem.attr('alt') + ' 1px 1px 2px');
});

[/block]

Код:

MyBBCode.addEditorButton('shadow', {
    name: "Шрифт с тенью",
    onclick: () => {
        const enteredColor = prompt("Введите цвет тени", "red");
        if (!enteredColor) { return; }
        bbcode(`[shadow=${enteredColor}]`, '[/shadow]');
    },
}, 'color');

Код:

#button-shadow {
    background: url(http://www.iconsearch.ru/uploads/icons/gnomeicontheme/16x16/stock_text-shadow.png) no-repeat center;
}

Lorem ipsum dolor sit amet, [shadow=red]consectetur adipiscing elit[/shadow]. Suspendisse sed lorem at ligula fermentum scelerisque vitae semper quam. Donec pharetra tellus eget neque viverra, vitae sodales urna facilisis. Etiam lectus eros, dictum sed velit nec, laoreet ornare nisi.

Поделиться72021-06-14 18:15:06

Автор: kozhilya
Администратор
Зарегистрирован: 2020-11-17
Приглашений: 0
Сообщений: 30
Провел на форуме:
1 день 0 часов
Последний визит:
2024-02-07 19:43:33

[float] — Обтекание текста

float:aton

Код:

MyBBCode.addTag('float', (elem, selector, set_html) => {
    elem.css('float', elem.attr('alt'));
});

Код:

MyBBCode.addEditorButton('floatLeft', {
    name: "Обтекание слева",
    onclick: () => bbcode('[float=left]', '[/float]'),
}, 'link');

MyBBCode.addEditorButton('floatRight', {
    name: "Обтекание справа",
    onclick: () => bbcode('[float=right]', '[/float]'),
}, 'link');

Код:

#button-floatLeft {
    background: url(https://example.com/example.png) no-repeat center;
}
#button-floatRight {
    background: url(https://example.com/example.png) no-repeat center;
}

[float=left][/float] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed lorem at ligula fermentum scelerisque vitae semper quam. Donec pharetra tellus eget neque viverra, vitae sodales urna facilisis. Etiam lectus eros, dictum sed velit nec, laoreet ornare nisi.

[float=right][/float] Phasellus id tortor enim. Sed accumsan eros non enim fermentum, eu commodo metus tincidunt. Morbi bibendum dapibus orci interdum dictum. Ut nec consectetur diam, id imperdiet quam.

Поделиться82021-06-14 18:21:35

Автор: kozhilya
Администратор
Зарегистрирован: 2020-11-17
Приглашений: 0
Сообщений: 30
Провел на форуме:
1 день 0 часов
Последний визит:
2024-02-07 19:43:33

[indent] — Красная строка

indent:sio

Код:

.custom_tag_indent {
    margin:1em 2.1em;
}

Код:

MyBBCode.addEditorButton('indent', {
    name: "Красная строка",
    onclick: () => insert('[indent]'),
}, 'additional');

Код:

#button-indent {
    background: url(http://s7.uploads.ru/t/mnkgq.png) no-repeat center;
}

[indent] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed lorem at ligula fermentum scelerisque vitae semper quam. Donec pharetra tellus eget neque viverra, vitae sodales urna facilisis. Etiam lectus eros, dictum sed velit nec, laoreet ornare nisi.

[indent] Nulla suscipit velit non nisl tempor, ut convallis orci semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eleifend leo eu nibh ornare, congue commodo lorem facilisis. Proin ornare sodales ipsum, ut condimentum diam gravida vitae.

[indent]Phasellus id tortor enim. Sed accumsan eros non enim fermentum, eu commodo metus tincidunt. Morbi bibendum dapibus orci interdum dictum. Ut nec consectetur diam, id imperdiet quam.

Страница: 1

JavaScript

CSS

Демонстрационный форум kozhilya

Меню навигации

Пользовательские ссылки

Информация о пользователе

MyBBCode — библиотека

Сообщений 1 страница 8 из 8

Поделиться12021-06-14 13:06:01

Поделиться22021-06-14 13:07:59

Поделиться32021-06-14 14:26:19

Поделиться42021-06-14 14:35:37

Поделиться52021-06-14 17:22:16

Поделиться62021-06-14 18:02:33

Поделиться72021-06-14 18:15:06

Поделиться82021-06-14 18:21:35