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. 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 Schritt 1: Javascript einsetzen Du betrittst die Javascript-Verwaltung:Administrations-Bereich (erweitert) Module HTML und JAVASCRIPT Javascript Codes Verwaltung
Zunächst stellst du sicher, dass sie aktiviert ist: Anschließend erstellst du mithilfe des Buttons ein neues Javascript mit folgenden Einstellungen: 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 . Schritt 2: CSS-Code einsetzen Du öffnest das CSS-Stylesheet:Administrations-Bereich (erweitert) Anzeige Bilder & Farben Farben Reiter "CSS Stylesheet"
Dort fügst du folgenden Code ein: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. Viel Spaß mit dem Wörter- und Zeichenzähler! 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!
Günther Administrator Anzahl der Beiträge : 15068Browser : Anmeldedatum : 16.07.08
Gefällt mir Gefällt mir nicht
Ähnliche Themen Ähnliche Themen
Befugnisse in diesem Forum
Sie können in diesem Forum
nicht antworten