�� kozhilya

MyBBCode � ��

mybb@mybb.ru (kozhilya) — Mon, 14 Jun 2021 18:21:35 +0300

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

MyBBCode � ��

mybb@mybb.ru (kozhilya) — Mon, 24 May 2021 22:01:49 +0300

��

�� , ��, �� Font Awesome, �� MyBBCode. �� , �� , � � div � ��, �� Flexbox.

��:

// ������������� ������ ������ ������
MyBBCode.editor.wrapper = [ '<div class="flex-form-buttons">', '</div>' ];

// �������������� ����������� ������ (�� �����������)
MyBBCode.editor.specials['\n'] = '</div><div class="flex-form-buttons">';
MyBBCode.editor.specials['|'] = '<div class="flex-form-buttons-splitter"><i class="fas fa-grip-lines-vertical"></i></div>';
MyBBCode.editor.specials['~'] = '<div class="flex-form-buttons-filler"> </div>';

// �������, �������� ������ ������.
MyBBCode.editor.generator = function(key, value) {
    let icon;
    
    switch(key) {
        case 'size':     icon = 'text-height'; break;
        case 'strike':   icon = 'strikethrough'; break;
        case 'spoiler':  icon = 'book'; break;
        case 'hide':     icon = 'lock'; break;
        case 'quote':    icon = 'quote-left'; break;
        case 'color':    icon = 'palette'; break;
        case 'addition': icon = 'tools'; break;
        
        case 'left': 
        case 'center': 
        case 'right': 
        case 'justify': 
            icon = 'align-' + key; break;
        
        default: icon = key;
    }   
    
    return `<div class="flex-form-buttons-button" id="button-${key}" title="${value.name}"`
        + ` onclick="FORUM.get('editor.${key}.onclick()')"><i class="fas fa-${icon}"></i></div>`
};

�� :

��:

.flex-form-buttons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
.flex-form-buttons .flex-form-buttons-button {
    font-size: 1.2em;
    flex: 0 1 auto;
    padding: 0.5em;
    text-align: center;
    cursor: pointer;
}

.flex-form-buttons .flex-form-buttons-splitter {
    font-size: 1.8em;
    padding: 0.1em;
}

.flex-form-buttons .flex-form-buttons-filler {
    flex-grow: 1;
}

�, �� , �� :

��:

MyBBCode.addEditorButton('|', null, 'bold');
MyBBCode.addEditorButton('~', null, 'addition');

��

MyBBCode � ��

mybb@mybb.ru (kozhilya) — Thu, 22 Apr 2021 16:49:57 +0300

��

1.0
�� .
�� pun_main_ready, pun_preview, pun_post, pun_edit, spoiler.firstOpen.
�� addAdapter, addTag.

1.1
�� addAuthorEditor.

1.2
�� editor � �� addEditorButton � generateEditorButtons.

���������������� ����� kozhilya

MyBBCode � ����������

MyBBCode � �����

MyBBCode � ������������

�� kozhilya

MyBBCode � ��

MyBBCode � ��

MyBBCode � ��