Zamiana ikon w polu edycji posta

Awatar użytkownika
O mnie
prokrastynuję, tracąc nadzieję w innych; tworzę i osuwam się powoli w pochłaniający mnie cień.
and there is no longer rising from the ashes
Podziękował(a): 3 razy | Pomógł(a) : 17 razy

 diazepamum#9790

#57385 23 sty 2022, 18:56

Zamiana ikon w polu edycji posta
Oryginalny skrypt: mpelmmc & Flerex
Skrypt został przeze mnie zmodyfikowany o: aktualizację dodanych przez Forumotion przycisków.
Mój poradnik zawiera dodatkowo: importowanie nowego Font Awesome, dodanie gradientu i zmianę kolorów przycisków.

Instalacja
  1. Importujemy Font Awesome wedle poradnika.
  2. Wchodzimy do Panelu Administracyjnego, następnie do zakładki Modules -> HTML & JAVASCR!PT -> Javascr!pt codes management i klikamy CREATE A NEW JAVASCR!PT.
  3. Skrypt nazywamy wedle własnego uznania (polecam: "Ikony pola edycji posta"), a następnie wybieramy Placement poprzez zaznaczenie "In all the pages". Jeżeli damy "In the topics", w tworzeniu Prywatnej Wiadomości będą stare ikony.
  4. Wklejamy poniższy kod:

    Kod: Zaznacz cały

    !function() {
     
     const settings = {
     css: `
     body {
     background: white;
     }
     
     body,
     code:before,
     html,
     p,
     table {
     font-size: 15px;
     color: black;
     font-family: Verdana, sans-serif;
     line-height: 1.8;
     }
     `, // CSS in JS is a bad habit, but its the only way.
     icons: {
     bold: 'bold',
     italic: 'italic',
     underline: 'underline',
     strike: 'strikethrough',
     left: 'align-left',
     center: 'align-center',
     right: 'align-right',
     justify: 'align-justify',
     bulletlist: 'list-ul',
     orderedlist: 'list-ol',
     horizontalrule: 'grip-lines',
     quote: 'quote-right',
     code: 'terminal',
     faspoiler: 'toggle-on',
     fahide: 'eye-slash',
     table: 'table',
     servimg: 'upload',
     image: 'images',
     link: 'link',
     embed: 'file-code',
     youtube: ['fab', 'fa-youtube'],
     dailymotion: 'video',
     flash: 'file-video',
     headers: 'heading',
     size: 'text-height',
     color: 'palette',
     font: 'font',
     removeformat: 'undo',
     more: 'ellipsis-h',
     subscript: 'subscript',
     superscript: 'superscript',
     fascroll: 'arrows-alt-h',
     faupdown: 'arrows-alt-v',
     farand: 'dice',
     faroll: 'dice-six',
     emoticon: 'smile',
     twemojifa: 'grin-squint',
     date: 'calendar',
     time: 'clock',
     pastetext: 'paste',
     source: 'code',
     mention: 'at',
     },
     
     };
     
     function replaceButtons(container) {
     Object.keys(settings.icons).forEach(k => {
     const button = container.querySelector('.sceditor-button-' + k),
     icon = document.createElement('I');
     
     if (!button) return;
     
     icon.classList.add(...(Array.isArray(settings.icons[k])
     ? settings.icons[k]
     : ['fas', 'fa-' + settings.icons[k]]
     ));
     
     
     button.removeChild(button.firstElementChild);
     button.appendChild(icon);
     
     });
     }
     
     function appendStylesheet({contentDocument}) {
     const style = contentDocument.createElement('STYLE');
     style.innerHTML = settings.css;
     contentDocument.head.appendChild(style);
     }
     
     function ready(e) {
     const container = document.getElementById('textarea_content');
     if (!container) return;
     
     replaceButtons(container);
     
     const iframe = container.querySelector('iframe');
     if (!iframe) return;
     
     appendStylesheet(iframe);
     
     }
     document.addEventListener('DOMContentLoaded', ready);
     
    }();
  5. Przechodzimy do zakładki Display -> Pictures and Colors -> Colors -> Arkusz CSS i wklejamy poniższy kod (color można dowolnie zmieniać):

    Kod: Zaznacz cały

    .sceditor-container .sceditor-button {
        display: flex;
        align-items: center;
        justify-content: center;
        text-indent: 0;
        color: #333;
    }
    Efekt (Font Awesome v.5.x):
    Obrazek

    Efekt (Font Awesome v.6.x):
    Obrazek

Dodatkowe zmiany kosmetyczne
Jeżeli chcemy, dla każdego przycisku indywidualnie możemy ustalić kolor. Lista selektorów znajduje się w spoilerze.
Pokaż

YouTube na czerwony kolor
Obrazek

Kod: Zaznacz cały

a.sceditor-button.sceditor-button-youtube {
color: #c4302b;
}
I analogicznie zmieniamy inne rzeczy.

Dodanie przykładowego gradientu do wszystkich ikonek
Obrazek
Kopiujemy deklaracje wewnątrz klasy do CSS-a wklepywanego na samym początku do Arkusza CSS zamiast color - jest to najbardziej optymalna opcja bez nawalania nadmiarowej ilości kodu.

Kod: Zaznacz cały

.sceditor-container .sceditor-button {
    background:-webkit-linear-gradient(#975e9f,#17440c);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
Lub zastępujemy go tym:

Kod: Zaznacz cały

.sceditor-container .sceditor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    background:-webkit-linear-gradient(#975e9f,#17440c);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
Uwaga: Zmiany dokonywane wcześniej poprzez color nie będą wówczas działały!


YouTube na czerwony kolor, gdy gradient jest aktywny
Obrazek

Kod: Zaznacz cały

a.sceditor-button.sceditor-button-youtube {
    background:-webkit-linear-gradient(#c4302b,#c4302b);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
I analogicznie zmieniamy inne rzeczy.

Jeżeli poradnik okazał się pomocny - będę wdzięczna za poinformowanie o tym!
Why don't you come a little closer? I promise I won't bite
I'll put you in a folder, I'll keep you in my mind

ODPOWIEDZ ]