[Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen

von Günther Di 11 März 2014 - 18:44

Wörter- und Zeichenzähler beim Beitragsschreiben

Hallo,

in diesem Tutorial möchte ich euch dabei helfen, euren Mitgliedern einen Wörter- und Zeichenzähler beim Schreiben ihrer Beiträge anzubieten.
[Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen Tuto_z10

Der Wörter- und Zeichenzähler besitzt folgende Vorteile:

zeigt in Echtzeit die aktuelle Anzahl an Wörtern und Zeichen an
funktioniert unter allen Forenversionen
funktioniert sowohl im Codemodus als auch im WYSIWYG-Modus des Editors
zählt BBCode nicht mit

[Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen 09615110

Schritt 1: Javascript einsetzen

Du betrittst die Javascript-Verwaltung:

Administrations-Bereich (erweitert) [Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen Arrow10

Module

HTML und JAVASCRIPT [Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen Arrow10

Javascript Codes Verwaltung

Zunächst stellst du sicher, dass sie aktiviert ist:
[Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen Tuto_z11

Anschließend erstellst du mithilfe des Buttons [Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen Tuto_z12

ein neues Javascript mit folgenden Einstellungen:
[Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen Tuto_z17

In das Feld Javascript Code fügst du folgenden Code ein:

Code:: $(window).load(function() { $(".sceditor-container").after("<div id='Forumieren_editorAmount'>Du hast 0 Zeichen und 0 Wörter geschrieben</div>"); $(".sceditor-container > textarea").keyup(function() { var Forumieren_characterAmount = $(".sceditor-container > textarea").val().replace(/\[img[^\]]*\]((?!\[[[\/]*img).)*\[\/img\]/g,"").replace(/\[[^\]]*\]/g,"").length; var Forumieren_wordAmount = $(".sceditor-container > textarea").val().replace(/\s/g, " ").split(" ").length; $("#Forumieren_editorAmount").html("Du hast " + Forumieren_characterAmount + " Zeichen und " + Forumieren_wordAmount + " Wörter geschrieben"); }); $(".sceditor-container > iframe").contents().find("body").keyup(function() { var Forumieren_wysiwygBody = $(".sceditor-container > iframe").contents().find("body"); var Forumieren_txt = Forumieren_wysiwygBody.text().replace(/\[[^\]]*\]/g,""); var Forumieren_html = Forumieren_wysiwygBody.html(); var Forumieren_htmlClean = Forumieren_html.replace(/<br><\/p>/g,"</p>").replace(/<br><\/div>/g,"</div>").replace(/ align=\"left\"/g,"").replace(/ align=\"center\"/g,"").replace(/ align=\"right\"/g,"").replace(/<br type=\"_moz\">/g,""); var Forumieren_whiteSpace = 0; if ( Forumieren_htmlClean.indexOf("<\/p><p>") >= 0 ) { var Forumieren_numP = Forumieren_htmlClean.match(/<\/p><p>/g).length; Forumieren_whiteSpace = Forumieren_whiteSpace + Forumieren_numP; }; if ( Forumieren_htmlClean.indexOf("<\/div><div>") >= 0 ) { var Forumieren_numDiv = Forumieren_htmlClean.match(/<\/div><div>/g).length; Forumieren_whiteSpace = Forumieren_whiteSpace + Forumieren_numDiv; }; if ( Forumieren_htmlClean.indexOf("<br>") >= 0 ) { var Forumieren_numBr = Forumieren_htmlClean.match(/<br>/g).length; Forumieren_whiteSpace = Forumieren_whiteSpace + Forumieren_numBr; }; if ( $(".sceditor-container > iframe").contents().find("body div").length > 0 ) { Forumieren_whiteSpace = Forumieren_whiteSpace -1; }; if ( $(".sceditor-container > iframe").contents().find("body").parent().html().indexOf("<br></body>") >= 0 ) { Forumieren_whiteSpace = Forumieren_whiteSpace -1; }; var Forumieren_characterAmount = Forumieren_txt.length + Forumieren_whiteSpace; var Forumieren_wordAmount = Forumieren_txt.replace(/\s/g, " ").split(" ").length + Forumieren_whiteSpace; $("#Forumieren_editorAmount").html("Du hast " + Forumieren_characterAmount + " Zeichen und " + Forumieren_wordAmount + " Wörter geschrieben"); }); });

Zuletzt klickst du unter dem Eingabefeld auf Bestätigen.

[Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen 09615110

Schritt 2: CSS-Code einsetzen

Du öffnest das CSS-Stylesheet:

Administrations-Bereich (erweitert) [Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen Arrow10

Bilder & Farben [Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen Arrow10

Farben

Reiter "CSS Stylesheet"

Dort fügst du folgenden Code ein:
[Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen Tuto_z16

Code:: /* Wörter- und Zeichenzähler ANFANG */ #Forumieren_editorAmount { color: #000000; font-size: 12px; margin-top: 5px; text-align: center; } /* Wörter- und Zeichenzähler ENDE */

Die Schriftfarbe (color) sowie Schriftgröße (font-size) der Meldung kannst du selbst im Code nach Bedarf anpassen.

Falls in diesem Eingabefeld bereits Code vorhanden ist, fügst du den CSS-Code für den Wörter- und Zeichenzähler einfach unterhalb des bereits vorhandenen Codes ein.
Anschließend klickst du unter dem Eingabefeld auf Annehmen und kannst den Wörter- und Zeichenzähler sofort ausprobieren. Smile

Viel Spaß mit dem Wörter- und Zeichenzähler! Very Happy

Liebe Grüße
Günther

Dieses Tutorial stammt von Günther.
Das Tutorial unterliegt dem Copyright von hilfe.forumieren.com.
Eine Veröffentlichung außerhalb von hilfe.forumieren.com ist nicht gestattet!

[Tutorial] Wörter- und Zeichenzähler beim Beitragsschreiben hinzufügen Helpmo10

	Neue Beiträge seit dem letzten Besuch.	
	Textbausteine des MODERATIONSTOOL	
	AB > PFAD > GENERATOR	
	FORUM > PFAD > GENERATOR	
	Unterstützung Lösungs-Probleme	
	Auffällige User	
	Der Runde Tisch	
	HÄUFIG GESTELLTE FRAGEN	