Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in ťťn van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

Font Awesome knop in de text editor

Vorige onderwerp Volgende onderwerp Go down

Font Awesome knop in de text editor

Bericht van 10spetter10 op vr 8 jan 2016 - 11:47

Font Awesome knop in de text editor


Deze tutorial zal je helpen om een nieuwe knop aan de SCEditor van je Actieforum forum toe te voegen. Deze knop laat je toe om al de Font Awesome iconen te gebruiken in je posts zonder enige moeite!


Klik hier om een demo te zien

Font Awesome installeren


Eerst en vooral moeten we dit lettertypes installeren op je forum. Dit kan je doen aan de hand van deze gegevens en de tutorial over hoe je lettertypes instelt: Lettertypes toevoegen vanuit Google Fonts.


  • html (templates)

    Code:
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

  • javascript

    Code:
    (function() {
     †var FA = 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',
     † † †a = document.createElement('LINK');
     †a.rel = 'stylesheet';
     †a.type = 'text/css';
     †a.href = FA;
     †document.getElementsByTagName('HEAD')[0].appendChild(a);
    })();



Knop maken in SCEditor


Eerst gaan we de css instellen zodat de knop en het popup-menu goed worden weergegeven.

Beheerderspaneel Display Plaatjes en kleuren Kleuren Cascading Style Sheet

Plak hier de volgende regels css:

Code:
/* Voeg fontawesome to aan de textarea lettertypes zodat de icoontjes zichtbaar zijn */
.sceditor-container textarea {
 †font-family:Verdana, Arial, Helvetica, sans-serif, FontAwesome !important;
}
/* afbeelding knop */
.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;
}

Het volgende wat we gaan doen is de knop installeren in de SCEditor. Dit doen we aan de hand van javascript.

Beheerderspaneel Modules html & javascript Javascript code beheer †

Code:
Titel: (vb: SCEditor Font Awesome Iconen
Plaatsing: Op alle pagina's
Code: (zie hieronder)


Code:
$(function(){
 †if (!$.sceditor) return;
 †var defaultSize = 18, // standaard icoon grootte
 † † †autoClose = 1, // sluit de dropdown nadat er een icoon is aangeklikt
 
 † † †// icoon lijst
 † † †fa = ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
 † † †A = '', O = A;
 
 †// als de standaard grootte 0 is zullen we een standaard grootte opstellenif 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]&nbsp;', '', 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,'); // voeg de knop toe aan de werkbalk
});

Aanpassingen


Er zijn in dit script twee aanpassingen mogelijk, beide zijn te vinden bovenaan in het javascript.

defaultSize : deze optie staat je toe om zelf een standaard grootte voor je iconen in te stellen. Momenteel staat deze op 18, als je de iconen wilt gebruiken zonder herschaling verander je deze waarde naar 0.

autoClose : deze optie staat je toe om te kiezen of je wilt dat het dropdown menu automatisch sluit nadat je een icoontje hebt gekozen. Deze optie is standaard geactiveerd, maar indien je deze zou willen uitschakelen moet je de 1 naar een 0 veranderen.

Als je klaar bent met het aanpassen sla je het script op. Wanneer je nu naar je de teksteditor gaat zie je nu de Font Awesome vlag in de werkbalk †. Als je erop klikt zie je nu de lijst met iconen die je kan kiezen.

Hoe awesome is dit niet? †575335


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1298
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum