Αυτός ο οδηγός θα σας βοηθήσει να προσθέσετε ένα κουμπί στο SCEditor στο ForumGreek φόρουμ. Αυτό το κουμπί σας επιτρέπει να χρησιμοποιήσετε όλα τα Font Awesome εικονίδιο με ελάχιστη προσπάθεια!
Προσοχή : πρέπει πρώτα να έχετε εγκαταστήσει το Font Awesome, αλλιώς τα εικονίδια δεν θα εμφανίζονται σε όλους.
Εγκατάσταση
Πρώτα, πρέπει να προσθέσετε στο CSS κάποιους κώδικες για να εμφανίζονται τα εικονίδια σωστά. Πηγαίντε στο Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet και επικολλήστε τον παρακάτω κώδικα:
- Κώδικας:
/* Add fontawesome to textarea font-family so the icons are visible */ .sceditor-container textarea { font-family:Verdana, Arial, Helvetica, sans-serif, FontAwesome !important } /* button image */ .sceditor-button-fontawesome div { background:url(http://i19.servimg.com/u/f19/19/06/98/92/fa-f10.png) !important }
/* drop down */ .sceditor-fontawesome { width:220px; height:250px; overflow-y:auto; }
/* icons */ .sceditor-fontawesome i { color:#333; font-size:20px; text-align:center; cursor:pointer; padding:3px 0; width:25%; } .sceditor-fontawesome i:hover { color:#666 }
Έπειτα πρέπει να εγκαταστήσετε το κουμπί στο SCEditor. Πηγαίντε στο Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript, βεβαιωθείτε ότι η διαχείριση των Javascript κωδικών είναι ενεργή και μετά δημιουργήστε ένα νέο σκριπτ:
Title: SCeditor Font Awesome Icons Placement: In all the pages Κώδικας:
- Κώδικας:
$(function(){ if (!$.sceditor) return; var defaultSize = 18, // default icon size autoClose = 1, // closes drop down after an icon is clicked, if enabled // icon list fa = ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''], A = '', O = A; // if the size is above 0 we'll format a default size for the icons if (defaultSize) { A += '[size=' + defaultSize + ']'; O += '[/size]'; } // create sceditor button and drop down $.sceditor.command.set('fontawesome', { dropDown : function(editor, caller, callback) { var a, b = '', c = document.createElement('DIV'), i = 0, j = fa.length; for (; i<j; i++) b += '<i class="fa">' + fa[i] + '</i>'; c.innerHTML = b; for (a = c.getElementsByTagName('I'), i = 0, j = a.length; i<j; i++) { a[i].onclick = function() { callback(this.innerHTML); autoClose && editor.closeDropDown(true); }; }
editor.createDropDown(caller, 'fontawesome', c); },
// wysiwyg exec : function(c) { var e = this; $.sceditor.command.get('fontawesome').dropDown(e, c, function(icon) { e.insert(' [font=FontAwesome]' + A + icon + O + '[/font] ', '', true, true, true); }); }, // source txtExec : function(c) { var e = this; $.sceditor.command.get('fontawesome').dropDown(e, c, function(icon) { e.insert(' [font=FontAwesome]' + A + icon + O + '[/font] ', ''); }); }, tooltip : 'Font Awesome Icons' }); toolbar = toolbar.replace(/date,/,'fontawesome,date,'); // add the button to the toolbar });
Τροποποιήσεις : Παρακάτω θα βρείτε μία επεξήγηση για κάθε τροποποιήσιμες ρυθμίσεις που μπορούν να βρεθούν στην αρχή του σκριπτ.
Το defaultSize σας επιτρέπει να θέσετε ένα προεπιλεγμένο μέγεθος για τα εικονίδια. Τώρα έχει ρυθμιστεί στο 18, αν θέλετε να μην υπάρχει κάποιος περιορισμός στο μέγεθος, θέστε την τιμή στο 0.
Το autoClose σας επιτρέπει να επιλέξετε αν θέλετε η λίστα να κλείνει αυτόματα αφού έχει επιλεχθεί κάποιο εικονίδιο. Αυτή η επιλογή είναι ενεργοποιημένη, αν θέλετε να την απενεργοποιήσετε απλώς αλλάξτε τη τιμή από 1 σε 0.
Μόλις τελειώσετε, αποθηκεύστε το σκριπτ. ( )
|